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.