I'm trying to make a CORS requests to communicate between my client and server placed in two different domain.
The server headers has been set to the following -
Access-Control-Allow-Headers:Content-Type, Authorization, Content-Length, X-Requested-With
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*
I can see the response header coming through if I hit the server url (http://server.com)
Now when I use jquery to send the data and method to the server to process and get back the data then I get the following
Failed to load http://server.com/event/live: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3016' is therefore not allowed access. The response had HTTP status code 502.
Jquery code is --
callMyAPI : function(pUrl,pType,pData,callback){
var apiURL = API_HOST+pUrl;
jQuery.ajax({
xhr: function() {
var xhr = jQuery.ajaxSettings.xhr();
xhr.upload.onprogress = function(e) {
if (typeof callback == "function"){
var percentComplete = parseInt((e.loaded / e.total)*100);
callback('progress',percentComplete);
}
};
xhr.addEventListener("progress", function(e){
if (typeof callback == "function"){
if (e.lengthComputable) {
var percentComplete = parseInt((e.loaded / e.total)*100);
callback('progress',percentComplete);
}
}
}, false);
return xhr;
},
url: apiURL,
data: pData,
type: pType,
beforeSend: function(xhr){
xhr.withCredentials = true;
},
crossDomain: true,
contentType: 'application/json',
dataType: 'json',
success: function(data) {
if (typeof callback == "function"){
callback('success',data);
}
},
complete: function(){
if (typeof callback == "function"){
callback('complete');
}
}
}).fail(function(xhr, status, error) {
if (typeof callback == "function"){
callback('fail',error);
}
});
},
Any help is highly appreciated. Thanks in advance.
This has to do nothing with your jquery code. It is the browser that blocks the calls. I suggest that you ensure following,
http://server.com/event/live route as mentioned.