Why Am I Getting an XMLHttpRequest Error: \'No \'Access-Control-Allow-Origin\' Header Present?

XMLHttpRequest Error: 'No 'Access-Control-Allow-Origin' Header Present

In this project, an XML file hosted on www.ecb.europa.eu is referenced for currency conversion. However, an error is encountered due to the same-origin policy.

The same-origin policy prohibits cross-domain requests. In this case, the HTML page is located at a different domain (e.g., run.jsbin.com) than the XML file (ecb.europa.eu). Therefore, the request is deemed a Cross-Origin Resource Sharing (CORS) request.

CORS Communication

To enable CORS, the server responding to the request must include specific headers, including 'Access-Control-Allow-Origin'.

• The browser sends the request with an 'Origin' header indicating the domain of the HTML page.
• If the server responds with the 'Access-Control-Allow-Origin' header matching the origin, the request is allowed. Otherwise, the request is blocked.

Fixing the Error

To resolve the issue, the XML file server needs to be configured to add the 'Access-Control-Allow-Origin' header to its responses. This header can be set to the same origin (e.g., 'Access-Control-Allow-Origin: http://run.jsbin.com') or '*' to allow access from any origin.

If server-side configuration is not possible, a mirror proxy can be used to intercept the request and add the necessary headers before forwarding it to the actual server.

The above is the detailed content of Why Am I Getting an XMLHttpRequest Error: \'No \'Access-Control-Allow-Origin\' Header Present?. For more information, please follow other related articles on the PHP Chinese website!