How to bypass 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 is being served from domain-A.com is requested from another domain-B.com. The best possible way is to setup the server properly, but during development, you can temporarily bypass CORS errors.

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:

Bypass CORS errors using Requestly

Method 1

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
2. Open App and Click On HTTP Rules then click on New Rule in the Top-Right.
   
3. Next, Select the Modify Headers Rule from the list of rules. This should navigate you to the rule editor.
4. Define for which requests you want the modifications to be made.
   eg: If you want to bypass CORS for production.com/api

   

5. Select Response headers to override the headers

   

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

If you still face any issues 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.

Method 2 (Using Templates)

1. Download Requestly.
2. Go to Requestly App → HTTP Rules → Templates.
3. Select “Bypass CORS” template. It has all the required CORS headers already configured. Click Use this template.
4. Replace “<yourdomain.com>” with the domain you want to target.
5. Enable the rule & Hit Save
6. Done, CORS error will be gone.