无法跨域将jQuery POST请求发送到PHP服务器

Question

I am unable to send POST requests using jQuery from my website (front-end) to my PHP Zend Server app. They exists as separate apps on my server and are configured to on two different domains:

• site.website
• site.server:8899

The strangest thing is, it was working, I changed nothing (I think!), and now it doesn't work... So I'm hoping somebody can help.

I am using the following JavaScript to make the POST request:

var login = function(email, password) {

    var requestPath = serverPath + "/login";

    var params = {
        email       :       email,
        password    :       password
    };

    $.post(requestPath, params).done(function(response) {
        console.log(JSON.stringify(response));
        if(isResponseError(response)) {
            alert(response.opStatus + ': "' + response.opMessage + '"');
        } else {
            window.localStorage.setItem("zobyAuthData", JSON.stringify(response));
            if(window.localStorage.getItem("zobyAuthData") !== null) {
                window.location = 'home.php';
            }
        }
    }).error(function(request) { 
        console.log(JSON.stringify(request)); 
        alert(JSON.stringify(request));
    });

};

I am using the following code on my Zend Server to enable CORS in my index.php file within the public directory:

function EnableCors() {

    // Allow from any origin
    if (isset($_SERVER['HTTP_ORIGIN'])) {
        header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Max-Age: 86400');    // cache for 1 day
    }

    // Access-Control headers are received during OPTIONS requests
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
            header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

        if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
            header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

        exit(0);
    }

    echo "You have CORS!";
}

I have also check the Apache access_log and error_log files when I attempt to make the POST request and the following lines are written to access_log:

127.0.0.1 - - [29/Jul/2013:12:00:37 +0100] "OPTIONS /login HTTP/1.1" 200 -

127.0.0.1 - - [29/Jul/2013:12:01:04 +0100] "POST / HTTP/1.1" 200 6611

And error_log has:

[Mon Jul 29 11:47:36 2013] [error] [client 127.0.0.1] PHP Notice: Undefined index: email in /Library/WebServer/Documents/Site/WebsiteServer/application/controllers/LoginController.php on line 35, referer: http://site.website/

[Mon Jul 29 11:47:36 2013] [error] [client 127.0.0.1] PHP Notice: Undefined index: password in /Library/WebServer/Documents/Site/WebsiteServer/application/controllers/LoginController.php on line 36, referer: http://site.website/

On the client, the jQuery falls into the .error(request) function and the following is displayed in an alert:

{"readyState":0,"responseText":"","status":0,"statusText":"error"}

Answer 1

Yes, this will not work! You are violating the same origin policy here. In order for this to work you have to use CORS Headers in your request. CORS is an HTML5-feature and it allows cross origin requests for XHR requests.

Just visit these great sites for an intro on the topic: http://www.html5rocks.com/en/tutorials/cors/ or https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control

EDIT: In order to debug set the following headers

Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Headers "content-type"

This should allow any page. Also don't forget the "Access-Control-Allow-Headers" field..

Also use FF and Chrome for debuging. Both give different errors on the same problem. Depeding on the type of problem one or the other will give more information.