带有子域Symfony2的Ajax请求（FOSUserBundle示例）

Question

I have a main domain, site.dev and a subdomain, sub.site.dev.

I have a working connection request with FOSUserBundle, from site.dev. Now, I want to allowed this request from the subdomain sub.site.dev too.

When I try to do that, I have an error in the debug console : XMLHttpRequest cannot load http://site.dev/ajax/check_login_ajax. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://sub.site.dev' is therefore not allowed access.

Here is the part of my security.yml file :

firewalls:
    main:
        pattern: ^/
        form_login:
            login_path: fos_user_registration_register

            check_path:      check_login_ajax
            success_handler: user.security.authentication_handler
            failure_handler: user.security.authentication_handler
            provider: fos_userbundle
            csrf_provider: security.csrf.token_manager
        logout:
            path:   fos_user_security_logout
            target: /
        anonymous:    true

I already looked the "host" parameter in routing files, but can't find anything working well for both domain. I thought about 2 firewalls, but it doesn't work too.

Thanks a lot.

EDIT : Here, I'm talking about FOSUserBundle routing and Ajax, but I want this solution works for all the ajax requests I choose.

EDIT 2 : When I execute the AJAX request you can see under, I have the .fail code executed :

$.ajax({
        type: "POST",
        url: myRoute,
        dataType: 'json',
        data: {
            _username: $('#co_username').val(),
            _password: $('#co_password').val(),
            _remember_me: false,
            _csrf_token: $('#co__csrf_token').val()
        }
    }).done(function (data) {
        console.log('1');
    }).fail(function (data) {
        console.log('2');
    });

EDIT 3 : I just figured that an AJAX request is performed but nothing appears in the Symfony2 debug toolbar. So, I executed this code, to try :

$.ajax({
        type: "POST",
        url: Routing.generate('check_login_ajax'),
        dataType: 'json',
        data: $('#connection-form').serialize(),
        success: function(data) {
            console.log('3');
        }
    }).done(function (data) {
        console.log('1');
    }).fail(function (data) {
        console.log('2');
    });

'2' is still printed but I'm connected afterwards though.

How should work the ajaxSubmit with my code ? Do I have to include an extern library of jQuery ? And what's really the point of it ? Not sure to get everything

EDIT 4 : the statusText of my query is "OK" and the status is "200", so, why the .fail code is it executed... ?

EDIT 5 : To really understand the situation. I'm redirected to inscription/ when I try to reach check_login_ajax. Here is a preview of my debug developer toolbar

As you can see in my firewall, a login_path is set login_path: fos_user_registration_register. fos_user_registration_register being the inscription/ route.

When I execute the AJAX request which is in EDIT 3, I have the results :

200
OK
2

Answer 1

Add this code in your .htaccess under web folder:

<IfModule mod_headers.c>
    Header add Access-Control-Allow-Origin "http://sub.site.dev"
</IfModule>

don't forget to change "http://sub.site.dev" with your real subdomain.

For EDIT 2

Try to implement AJAX like this :

$.ajax({
           type: "POST",
           url: "{{path('check_login_ajax')}}",
           data: $("#idForm").serialize(), // serializes the form's elements.
           success: function(data)
           {

           }
       });

Also you can use AjaxSubmit

$(this).ajaxSubmit({
      url: "{{path('check_login_ajax')}}",
      type: "POST",
      success: function (result){

      }
)};

I hope this help.