Reputation: 3670
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
Upvotes: 33
Views: 86599
Reputation: 19
Another reason a request might fail is whether your request is directed at a URL that ends with or without a trailing slash. For example in my case I had to target domain.com/api/ because domain.com/api (no slash) was not valid and generated a missing header error.
If you test this URL in the browser, it gets automatically corrected and you'll think the URL is valid, but the request will fail. Very subtle and easy to overlook this one slash at the end.
Upvotes: 0
Reputation: 89
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!";
Upvotes: 7
Reputation: 2545
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.
Upvotes: 3
Reputation: 3670
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....
Upvotes: 108