Setting up CORS not working

Question

I have the following headers set on the server

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT");
response.addHeader("Access-Control-Allow-Headers","X-Custom-Header");

And i want to use the POST method to access a web service and send data to it but the problem is my setting up with the server is causing problems

I used the following method

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // XHR for Chrome/Safari/Firefox.
        xhr.open(method, url, true);
    }
    else if (typeof XDomainRequest != "undefined") {
        // XDomainRequest for IE.
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // CORS not supported.
        xhr = null;
    }
    return xhr;
}

and based on this object

url = "http://myurl.do";
var xhr = createCORSRequest('POST', url);
if (!xhr) {
    alert('CORS not supported');
    return;
}
var params = "name=pari123&action=initaction&gameId=slotreel3";
xhr.setRequestHeader('Content-Type', 'application/text/plain'); 
if(xhr.readyState == 4 && xhr.status == 200) 
{
    alert('Tested OK')
    xhr.send(params);
}
else
{
    alert('status not 200 or xhr is not ready');
}

// Response handlers.
xhr.onload = function() {
    var text = xhr.responseText;
    alert('Response from CORS request to ' + url + ': ' + text);
};

xhr.onerror = function() {
    alert('Woops, there was an error making the request.');
};

But always it alerts a message saying 'status not 200 or xhr is not ready' i am not able to proceed any one if you know please kindly help!

when i print the xhr.readyState its printing a value of 1

Answer 1

if(xhr.readyState == 4 && xhr.status == 200) 

This check must be placed in the onreadystatechange event handler. You obviously cannot have a 200 status code or a "finished" request before actually sending it.

What you wanted is probably this:

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        alert('Tested OK');
        var text = xhr.responseText;
        alert('Response from CORS request to ' + url + ': ' + text);
    }
};
xhr.send(params);

If you want an else case to check for errors remember that you still need to check for xhr.readyState == 4. You don't want your error-handling code to run for other readyStates.

There is no need for the onload event - when you get readyState == 4 you know the request has finished.

Answer 2

There can be several issues here.

I observed that different browsers implement CORS differently. My experience is based on Firefox and Google Chrome. For example, I had to add a special header on server side, so that Firefox would make the preflight (OPTIONS) request and the actual request (GET,PUT etc.) using one connection as Google Chrome does it. You would have to add on the server side:

response.addHeader("Keep-Alive", "timeout=2, max=100");
response.addHeader("Connection", "Keep-Alive");

I also noticed that some browsers do not like the wildcard ("*") in the CORS headers. A workaround for the line

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

would be to return the origin of the request and not a wildcard.

However, there could be also other problems and we would need more details. For example, does the request work when the server is hosted on the same domain (i.e. the problem might not be related to CORS). What server are you using?

Answer 3

xhr.send(); needs to be just after the call to xhr.open(); does it not? Status 1 means the request has not been sent yet, it'll never get to status 4 unless you actually send the request..