Errors in CORS policy application

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 to the document in use. However, a CORS policy can block a request from a resource located in a different domain other 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 and the Rules Engine section on Real-Time Manager (RTM) by following the steps:

On Google Chrome:

Select View > Developer > Developer tools.
Select the Network tab.
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.
Click Test CORS on click and observe the red line in the Name section.
Place the cursor over the page-cors-subdomain-a.txt line and observe the tooltip’s text.
Select page-cors-subdomain-a.txt and observe the information presented on the panel located on the right of the page.
Select the Console tab and then Errors and observe the origin and destination domains on the CORS error line.

Go to RTM and proceed as follows:

Select Products Menu > Edge Application.
Select the Edge Application from domain A (a.domain) > Rules Engine.
Create a new rule by clicking the New Rule button and selecting Response Phase.
In the Criteria section, fill in the fields as follows:

${http_origin}
is equal
http://b-domain.com” (Note: without / at end)

In the Behaviors section, fill in the fields as follows:

Add Response Header
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:

On Google Chrome, select View > Developer > Developer tools.
Select the Network tab.
Click the first line page-cors-subdomain.a.html and observe the information presented on the panel located on the right of the page.
Click Test CORS on click and find the following message:

“You clicked! I belong to the domain a. Domain b shall call me.”

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.

Didn’t find what you were looking for? Open a support ticket.