Debojyoti Chowdhury Debojyoti Chowdhury - 1 month ago 6
Ajax Question

Cannot use angular ajax as it shows No 'Access-Control-Allow-Origin'.But can use xmlhttprequest and jquery 3x to do it

As the questions says, i used xmlhttprequest class and jquery ajax to load data from a server successfully.But i couldnt do it in angular ajax which says No 'Access-Control-Allow-Origin'.

Note: Also when the jquery version is degraded to lower than 3 then it also shows No 'Access-Control-Allow-Origin' just like the angular ajax.Do they have any connection ???

Here is the jquery ajax code which is working but the same is not working when degrading the version from 3 to lower than 3:

<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){ $.ajax({
url:'http://...',
data:"{\"city\":\"Kolkata\"}",
method:'post',
headers:{'Content-Type': 'application/json','accept': 'application/json'},
success:function(data){
console.log(data);
},
error:function(data){
console.log(data);
}
});
});


And the next version is the normal xmlhttprequest version which is also working

$( window ).load(function() {
var http = new XMLHttpRequest();
var url = "...";
var params = "{\"city\":\"Kolkata\"}";
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/json");
http.setRequestHeader("accept", "application/json");
//Send the proper header information along with the request

http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
});


But angular1 ajax code is not working.The angular version is the latest one.

$http({
method: 'POST',
url: '...',
headers: {'Content-Type': 'application/x-www-form-urlencoded,application/json',
'Accept':'application/json'},
data: {'city':'Kolkata'}
}).then(function successCallback(response){
console.log(response);
//return response;
},function errorCallback(response){
//return response;
console.log(response);
});


Thanks for your time.

Answer

The answer is likely in your chrome devtools network tab. Take a look at the request and response headers for each of the requests, specifically for any CORS headers and the Origin header, looking for differences between the jQuery and Angular versions.

Also, see if there are any http requests of the OPTIONS method type, if so it is likely that the angular call is trying to send more headers or sending with credentials which would flag it for CORS.

If you cannot reduce the angular requests to not trigger CORS, you should be able to modify the server code to set a response header for Access-Control-Allow-Origin with a value of * or a string matching the origin that is being sent in request headers in most cases, although it really is dependent on the factors that are causing your request to use CORS. You may also need to supply Access-Control-Allow-Headers response header with value * or the names of the individual headers being sent in the request, comma separated.

It looks like your angular call is triggering CORS because you are setting an unsupported Content-Type simple request header:

CORS Simple Requests

Recommended reading - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS