How to Fix CORS Policy Errors

A Cross-Origin Resource Sharing (CORS) policy can block a request from a resource located in another domain different than the domain in use. Find out how to configure your application to fix this error.

View as Markdown

Cross-Origin Resource Sharing (CORS) is a mechanism for using HTTP headers to give access permission for specific resources that are on a different origin server from the one the document is located. However, a CORS policy can block a request from a resource located in another domain different than the domain in use.

To fix this error, let’s use the following example to guide the explanation:

Domains:

  • http://a.domain.com/ (origin)
  • http://b.domain.com/ (destination)

Error message:

Access to XMLHttpRequest at http://a.domain.com/page-cors-subdomain-a.txt from origin http://b.domain.com has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

To solve this type of error, configure your browser on Azion Console using Rules Engine.

On Google Chrome, proceed as follows:

  1. Select View > Developer > Developer tools.
  2. Select the Network tab.
  3. Click the first line page-cors-subdomain.a.html and observe the Request URL information presented on the panel located on the right of the page.
  4. Click Test CORS on click and observe the red line in the Name section.
  5. Place the cursor over the page-cors-subdomain-a.txt line and observe the tooltip’s text.
  6. Select page-cors-subdomain-a.txt and observe the information presented on the panel located on the right of the page.
  7. Select the Console tab and then Errors and observe the origin and destination domains on the CORS error line.

Go to Azion’s platform and proceed as follows:

  1. Access Console > Applications.
  2. Select the domain A (a.domain) application and navigate to the Rules Engine tab.
  3. Create a new rule by clicking the + Rule button.
  4. Name your rule.
  5. Select Response Phase.
  6. In the Criteria section, fill in the fields as follows: If ${http_origin} is equal http://b-domain.com (without the trailing slash /)
  7. In the Behaviors section, select the Add Response Header behavior.
  8. As an argument, add Access-Control-Allow-Origin: ${http_origin}.

Next, go to the HTML page and type the following code:

#1 page-cors-subdomain-a.html
<h2>Using the XMLHttpRequest Object</h2>
<div id="demo">
<button type="button" onclick="loadXMLDoc()">Test CORS on click
</div>
<script>
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "http://a.domain.com/page-cors-subdomain-a.txt", true);
xhttp.send();
}
</script>
</body>
</html>
#2 page-cors-subdomain-a.txt
You clicked!
I belong to the domain a.
Domain b shall call me.

Lastly, to validate the error was corrected, proceed as follows:

  1. On Google Chrome, select View > Developer > Developer tools.
  2. Select the Network tab.
  3. Click the first line page-cors-subdomain.a.html and observe the information presented on the panel located on the right of the page.
  4. Click Test CORS on click and find the following message: You clicked! I belong to the domain a. Domain b shall call me.
  5. Select the Console tab > Errors and check if there are no errors.

The CORS policy is now working correctly.

Trademarks

Chrome browser is a registered trademark of Google LLC in the United States and/or other countries.