Cross subdomain AJAX request, CORS error

Question

$(document).ready(function(){
    $.ajaxSetup({
        xhrFields: {
           withCredentials: true
        },
        crossDomain: true
    });


    function user_login(username, password, rememberme){        
        var request =   $.post(
                            'http://api.example.com/user/login',
                            {
                                'username': username,
                                'password': password,
                                'rememberme': rememberme
                            },
                            'json'
                        );

        request.done(function(res){
            ...
        });

        request.fail(function(res){
            alert('Request failed. Please try again.');
        }); 
    }
});

<?php
    /* ALLOW CORS */

    $http_origin = $_SERVER['HTTP_ORIGIN']);
    $allowed_http_origins = array(  "http://other.example.com",
                                    "http://www.example.com",
                                    "http://player.example.com",
                                    "http://app.example.com",
                                    "http://example.com"
    );

    if(in_array($http_origin, $allowed_http_origins)){  
        header('Access-Control-Allow-Origin: '. $_SERVER['HTTP_ORIGIN']);
        header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        header('Access-Control-Max-Age: 1000');
        header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
    }

    /* RETURN INFO */

    $return = array(
        'code' => 200,
        'text' => 'Succesfully logged in!'
    );

    echo json_encode($return);
?>

Hello again Stackoverflow,

In my current application I would like to login a user with AJAX on a self written api. This is the current set-up, but I am still getting an error in console:

XMLHttpRequest cannot load http://api.example.com/user/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.

What can I do to solve this? What is the problem?

Thanks in advance.

`HTTP_ORIGIN` is not issued by all browsers, its not even listed in the PHP Manual. Try some other way — Hanky Panky, May 03 '14 at 15:10
@Hanky웃Panky That does not seem to be the problem - Changeing the Access-Control-Allow-Origin temporarely to `*` did not solve the problem. — Thew, May 03 '14 at 15:27
If you only change what you are trying to do _inside_ the `if` control structure, that will still not make the if _condition_ magically become true if there _is_ no `HTTP_ORIGIN` … — CBroe, May 03 '14 at 18:01
@CBroe The data inside the `if` structure is to make sure that only whitelisted domains can get the data via javascript. — Thew, May 03 '14 at 18:43
Yes … but if `$http_origin` is not even _populated_, because `HTTP_ORIGIN` does not exist – then the _condition_ `in_array($http_origin, $allowed_http_origins)` won’t become true, and therefor your script will not send _any_ Access-Control headers, no matter if you changed the value inside the if block temporarily to `*` or not … — CBroe, May 03 '14 at 18:48
@CBroe Then again. Even when placed outside of the `if` module, and with Access-Control-Allow-Origin set to `*`, I still get that strange error. — Thew, May 04 '14 at 10:48

Cross subdomain AJAX request, CORS error

0 Answers0