Jquery Xml Error ' No 'Access-Control-Allow-Origin' Header Is Present on the Requested Resource.'

jQuery XML error ' No 'Access-Control-Allow-Origin' header is present on the requested resource.'

You won't be able to make an ajax call to http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml from a file deployed at http://run.jsbin.com due to the same-origin policy.

As the source (aka origin) page and the target URL are at different domains (run.jsbin.com and www.ecb.europa.eu), your code is actually attempting to make a Cross-domain (CORS) request, not an ordinary GET.

In a few words, the same-origin policy says that browsers should only allow ajax calls to services at the same domain of the HTML page.

Example:

A page at http://www.example.com/myPage.html can only directly request services that are at http://www.example.com, like http://www.example.com/api/myService. If the service is hosted at another domain (say http://www.ok.com/api/myService), the browser won't make the call directly (as you'd expect). Instead, it will try to make a CORS request.

To put it shortly, to perform a (CORS) request* across different domains, your browser:

• Will include an Origin header in the original request (with the page's domain as value) and perform it as usual; and then
• Only if the server response to that request contains the adequate headers (Access-Control-Allow-Origin is one of them) allowing the CORS request, the browse will complete the call (almost** exactly the way it would if the HTML page was at the same domain).
  
  
  • If the expected headers don't come, the browser simply gives up (like it did to you).

_{* The above depicts the steps in a simple request, such as a regular GET with no fancy headers. If the request is not simple (like a POST with application/json as content type), the browser will hold it a moment, and, before fulfilling it, will first send an OPTIONS request to the target URL. Like above, it only will continue if the response to this OPTIONS request contains the CORS headers. This OPTIONS call is known as preflight request.
** I'm saying almost because there are other differences between regular calls and CORS calls. An important one is that some headers, even if present in the response, will not be picked up by the browser if they aren't included in the Access-Control-Expose-Headers header.}

How to fix it?

Was it just a typo? Sometimes the JavaScript code has just a typo in the target domain. Have you checked? If the page is at www.example.com it will only make regular calls to www.example.com! Other URLs, such as api.example.com or even example.com or www.example.com:8080 are considered different domains by the browser! Yes, if the port is different, then it is a different domain!

Add the headers. The simplest way to enable CORS is by adding the necessary headers (as Access-Control-Allow-Origin) to the server's responses. (Each server/language has a way to do that - check some solutions here.)

Last resort: If you don't have server-side access to the service, you can also mirror it (through tools such as reverse proxies), and include all the necessary headers there.

Why does my JavaScript code receive a No 'Access-Control-Allow-Origin' header is present on the requested resource error, while Postman does not?

If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

When you are using Postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

Jquery-No 'Access-Control-Allow-Origin' header is present on the requested resource

These should be in the server, not the client:

"Access-Control-Allow-Origin: ": "*",

To implement that in server, for PHP:

<?php
  header("Access-Control-Allow-Origin: *");

For ASP.NET:

Response.AppendHeader("Access-Control-Allow-Origin", "*");

For others, check I want to add CORS support to my server for more information.

No 'Access-Control-Allow-Origin' header is present on the requested resource

you are trying to perform XMLHttpRequest(AJAX) to another domain.

This is restricted due to security reasons.

for more details see:
http://en.wikipedia.org/wiki/Cross-origin_resource_sharing

ajax post request is No 'Access-Control-Allow-Origin' header is present on the requested resource.'

The problem is because you are making a cross-domain AJAX request, which prevented by browser security - see the Same Origin Policy.

The request is expecting you to be making a request to a CORS enabled domain, hence why it is complaining about the non-existant header.

You either need to change your request to jsonp type, or use a server-side proxy to get the data.

---

Related Topics