How to solve CORS errors?

Cross-Origin Resource Sharing (CORS) is a security feature implemented by web browsers to prevent web pages from making requests to domains different from the one that served the web page. It happens when an endpoint being served from  domain-A.com  is requested from another  domain-B.com .

The server hosting the endpoint at  domain-A.com  first reads the  Origin  header sent from the browser, which tells it that the request was actually made from  domain-B.com . The server then checks if the request is allowed from that domain and, if so, continues to serve the request

Most production systems have very strict CORS policies, only allowing the production site to access the resources served. CORS errors can be a common headache for web developers, especially when building applications that need to interact with APIs on different domains.

It is important to understand that the server defines the CORS policies. It is communicated to the browser using response headers.

Types of CORS error

Access-Control-Allow-Origin

The server did not include the necessary ‘Access-Control-Allow-Origin’ response header to allow requests from the origin of the web page.

The value of Access-Control-Allow-Origin should either be the domain from which the request is made or * to allow requests from all domains.

Method is not allowed by Access-Control-Allow-Methods

The server allows the HTTP requests based on the value of Access-Control-Allow-Methods/Headers header.

Its value can be * to allow all the HTTP methods or headers or you can also specify them:

Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: *

Using the Requestly Header Rule, you can easily override the headers to solve CORS issues:

Solve CORS errors using Requestly

Requestly is a browser extension that lets you Modify Headers, Redirect URLs, Switch hosts, Mock API responses, Delay network requests, Insert custom scripts, and do much more. Using the modify headers rule, we can easily add, modify and remove any response Headers before it reaches the browser.

1. Install the Requestly browser extension and click on New Rule in the Top-Right.

1. Next, Select the Modify Headers Rule from the list of rules. This should navigate you to the rule editor.
2. Define for which requests you want the modifications to be made.

   eg: If you want to bypass CORS for production.com/api

   

3. Select Response headers to override the headers

   

4. Save the rule. This should handle most of the CORS errors you face.

If you still face any issue like

Then change the value of Access-Control-Allow-Origin to rq_request_initiator_origin() . This ensures that the value is always set to the origin of the request initiator. Here, you can read more about it.