Skip to content

Cross Origin Resource Sharing (CORS)

RAHUL RATHORE edited this page Jan 20, 2022 · 4 revisions

Introductions

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request. In that preflight, the browser sends headers that indicate the HTTP method and headers that will be used in the actual request.

Blocked by CORS policy: No 'Access-Control-Allow-Origin'?

We have a application with front end as Angular and api in NestJs. Lately, some of our developers unable to use anything due to CORS policy issue. Following is the issuea statement visible in console (windows).

Access to XMLHttpRequest at 'http://localhost:3000/api/feature/toggle/definition' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field sentry-trace is not allowed by Access-Control-Allow-Headers in preflight response

How to solve Blocked by CORS policy: No 'Access-Control-Allow-Origin' header'?

  1. Install extension on chrome (Allow CORS: Access-Control-Allow-Origin).

  2. To fix this error, one of our developer launched their browser with web security disabled. He executed this command: open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials