Question

I am trying to send a post request through ajax to another domain and get a json response. The server is situated in my company premise and through the logs, I can see that it is sending response with a json.

Following is a sample of my tries:

1)

function makeRequest(strURL){
    $.get(strURL+"?callback=rest.draw_table_dyn", "{}", 
    function(resp){
        rest.draw_table_dyn(resp);
    });
}

2)

xmlhttpPost : function(strURL) {
var xmlHttpReq = false;
var self = this;
if (window.XMLHttpRequest) {
    self.xmlHttpReq = new XMLHttpRequest();
    }
else if (window.ActiveXObject) {
    self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader("Content-Type", "application/json");
self.xmlHttpReq.onreadystatechange = function() {
    rest.draw_table_dyn(self.xmlHttpReq.responseText);
}
self.xmlHttpReq.send(null);
}

However, following are the problems I encounter:

1) Always the server is hit with a “OPTIONS” request rather than a “GET” or “POST” request. I understood from this link(http://engin.bzzzt.biz/2010/01/25/cross-domain-xhr-access-control-preflight/) that it is a preflight request as per the standards.

But is it possible for me to make a POST request? I tried using $.post, $.ajax or even $.get, but to no avail.

2) The response data is empty. I require the data to populate the page with items. Is there a way to read the json? Currently I am getting only an empty string with the return status a 0.

I tried xmlHttpRequest, $.ajax, $.get and $.post to send the request and receive the json to no avail.

I read here(http://stackoverflow.com/questions/4221458/how-to-make-a-jsonp-call-to-an-api-using-jquery) about keeping the script in the tag. This also didn’t worked for me. Any ideas what I am doing wrong here?

Answer 1

Currently, the only way to POST to another origin via Ajax is if the server responds with an appropriate CORS Allow-* header:

Access-Control-Allow-Origin: your.origin

Without such a header, the request will be refused by the browser due to the Same-Origin Policy.

In your 1st example, it appears you’re attempting to use JSONP (?callback=...). Such requests are strictly limited to GET as they are made by appending a new <script> element to the page rather than via XMLHttpRequest:

<script src="http://remote.origin/resource?callback=rest.draw_table_dyn"></script>

CORS is also limited in browser support to those with either XMLHttpRequest Level 2 or XDomainRequest (IE8/9).

Beyond that, you’re limited to having to create a server-side proxy that mediates between the browser and the remote server.