How to fix Cross⁠-⁠Origin Resource Sharing (CORS) policy application errors

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 our 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 Console and proceed as follows:

  1. Select Products menu > Edge Application.
  2. Select the domain A (a.domain) application and navigate to the Rules Engine tab.
  3. Create a new rule by clicking the New Rule button and selecting Response Phase.
  4. Name your rule.
  5. In the Criteria section, fill in the fields as follows: If ${http_origin} is equal http://b-domain.com (without the trailing slash /)
  6. In the Behaviors section, select the Add Response Header behavior.
  7. 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</button>
</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

Section titled Trademarks

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

Contributors