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
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
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
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
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.
- Install the Requestly browser extension and click on New Rule in the Top-Right.
- Next, Select the Modify Headers Rule from the list of rules. This should navigate you to the rule editor.
- Define for which requests you want the modifications to be made.
eg: If you want to bypass CORS for
Responseheaders to override the headers
- 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
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.