# How to Fix CORS Policy 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 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](https://console.azion.com) using [Rules Engine](/en/documentation/products/build/applications/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](/en/documentation/products/guides/how-to-access-azion-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:

```html
#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](https://www.google.com/chrome/) is a registered trademark of Google LLC in the United States and/or other countries.