Viewed   98 times

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

 Answers

1

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....

Tuesday, December 27, 2022
3

what finally worked for me is xhr.setRequestHeader('Content-Type', 'text/plain');

EDIT: The server needs to add Access-Control-Allow-Headers: Content-Type to avoid this problem.

I am coming back to my own question a decade later. I don’t know if this is a good thing or a terrible thing.

Tuesday, September 13, 2022
3

The problem was actually in the fact that there was an exception in the action processing the POST request and as Norgerman mentioned, the default exception handler cleared the CORS headers.

Wednesday, August 31, 2022
 
kliron
 
4

I suppose my code got messed up w/ all the different solutions that I was trying. I was finally able to get it to work w/ setting the header (solution that was recommended and worked for others). All that I had to do to get it to work is add the following to my REST service response.

response.setHeader("Access-Control-Allow-Origin", "*");

Update:

I thought I figured this out but I've not. There is more it than just setting the header. Anyways, in my specific situation. I was trying to run my app (html, js) off of the hard drive specifically on chrome and trying to access web services available on the cloud.

Here is how I finally solved the problem. I started the chrome w/ the following parameters.

--disable-web-security -–allow-file-access-from-files

Like I mentioned earlier, this app is really a desktop application that will be run as part of the chromium embedded framework.

Thanks every one for your input.

Sunday, December 11, 2022
 
4

For those interested: I use easyXDM for cross domain messaging. That solved my problem. http://easyxdm.net/wp/

Tuesday, August 23, 2022
Only authorized users can answer the search term. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :