Solving CORS Issue using Chrome Extension

Question

My app is available on app-123.company.aws.com So in order to make the development process faster, I use Requestly to redirect scripts & APIs to my local development. This works fine most of the time but some API endpoints don't have CORS enabled and hence in some workflows I get a CORS error. I tried adding a Modify Headers Rule in Requestly like this

But I then got the following error

Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'

How can I solve this?

Answer 1

Try to add in your location directive

if ($http_origin ~* "^https?://app-123/.company/.aws/.com$") {
    add_header Access-Control-Allow-Origin $http_origin;
}

Answer 2

As the error points out, you cannot use the * as the value of the Access-Control-Allow-Origin header when the request's credentials mode is include.

When a request's credentials mode is include, it simply means the request is carrying either cookies or authorization headers. For security reasons, the server must return the exact origin instead of * as the value of Access-Control-Allow-Origin. Refer to this SO Answer

To solve this error, you can simply configure Modify Headers rule like this

Access-Control-Allow-Origin: https://app-123.company.aws.com

By looking at your setup, I assume your appId can change so Just in case, your origin can change. Requestly can automatically compute the page origin for you using a predefined function rq_request_initiator_origin(). Refer to this GitHub Issue

Access-Control-Allow-Origin: rq_request_initiator_origin()

At the runtime, you will get a response header Access-Control-Allow-Origin based on where the request originated So if the page origin is https://app-123.company.aws.com it will be the value of the header.