31
votes

I am trying to post form data from www.siteone.com to www.sitetwo.com via CORS. My ajax code is this:

<script>
$(document).ready(function(){
        $("#submit").live('click',function() {
            var url = "http://www.sitetwo.com/cors.php";
            var data = $('#form').serialize();
            jQuery.ajax({
                url : url,
                type: "POST",
                data : $('#form').serialize(),
                }).done(function(response){
                    alert(response);
                    }).fail(function(error){
                    console.log(error.statusText);
                    });
                return false;


});
});
</script>

and the file cors.php in www.sitetwo.com is as follows:

<?php
 header('Access-Control-Allow-Origin: *');
 header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
 echo "hai";
?>

But still Access-control-Allow-Origin error is thrown. The error thrown is this:

XMLHttpRequest cannot load http://www.sitetwo.com/cors.php. Origin http://www.siteone.com is not allowed by Access-Control-Allow-Origin. 

I came to know that, using CORS by just allowing the remote website via headers, we can use cross-domain request. But when I tried like this, error is thrown. Have I missed anything in here? Here is my request/response headers:

Response Headers
Connection  Keep-Alive
Content-Length  487
Content-Type    text/html; charset=iso-8859-1
Date    Fri, 23 Aug 2013 05:53:20 GMT
Keep-Alive  timeout=15, max=99
Server  Apache/2.2.15 (CentOS)
WWW-Authenticate    Basic realm="Site two Server - Restricted Area"
Request Headers
Accept  */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Length  43
Content-Type    application/x-www-form-urlencoded; charset=UTF-8
Host    www.sitetwo.com
Origin  http://www.siteone.com
Referer http://www.siteone.com/index.html
User-Agent  Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:23.0) Gecko/20100101 Firefox/23.0
3
What value does $_SERVER['HTTP_ORIGIN'] have? What value do you think it should have? Note that HTTP_ORIGIN isn't mentioned in the documentation for $_SERVERQuentin
I even tried header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Methods: POST, GET, OPTIONS'); but it didn't worked.Ganesh Babu
1.) I have no idea what specific issue you are having. You will need to clarify that. 2.) As always, with these types of questions, show your request and response headers.Ray Nicholus
$=jQuery.noConflict() just looks wrong. You're telling jQuery to revert $ back to it's original value, and then setting it back to jQuery. seems kinda pointless.Kevin B
Still waiting for request/response headers.Ray Nicholus

3 Answers

96
votes

Finally, I myself have solved the problem explained in the question. The code that I have implemented for accessing header is incorrect.

The below mentioned two line code, when given, didn't work:

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
?>

But handling CORS requests properly is a tad more involved. Here is a function that will respond more fully. The updated code is this :

 <?php
    // 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 found from another post It worked....

5
votes

To allow CORS for all:

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

echo "You have CORS!";
3
votes

Another reason is if you're missing a semicolon or something anywhere in your php, that CORS error message will be the only error that is displayed by the ajax, even if error reporting is on, while you can see the actual error by going to the php url in your browser.