jQuery XML Error: "No 'Access-Control-Allow-Origin' header is present on the requested resource"

When attempting to access an XML file located on a different domain using jQuery, you may encounter the error message: "No 'Access-Control-Allow-Origin' header is present on the requested resource." This error occurs due to the Same-Origin Policy, which restricts cross-origin AJAX calls.

Understanding the Same-Origin Policy

The Same-Origin Policy enforces that web browsers only allow AJAX calls to services hosted on the same domain as the HTML page making the request. In the given example, the HTML page is hosted on http://run.jsbin.com/, while the XML file is located at http://www.ecb.europa.eu/, resulting in a cross-origin request that is blocked by the browser.

Enabling Cross-Origin Requests (CORS)

To allow cross-origin requests, a server must include appropriate headers in its response. One of these headers is the Access-Control-Allow-Origin header, which specifies the origins that are allowed to access the resource.

In the case of the XML file, the ECB's server does not provide the necessary CORS headers, hence the error message. To resolve this, the server would need to be configured to include the following headers:

Access-Control-Allow-Origin: http://run.jsbin.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

Note on Preflight Requests

In certain cases, such as when making POST requests with non-simple headers, the browser may perform an OPTIONS preflight request to determine whether the server supports CORS for the specific request. If the server's response to this preflight request does not contain the appropriate CORS headers, the main request will fail with the same error message. Thus, it's important to include the necessary headers in responses to both the preflight and main requests.