CORS issue

Introduction

• For security reason, the browser is implementing same-origin policy behind the scene

• The browser will compare the origin of the request header with Access-Control-Allow-Origin with the response header to see whether it is matched

• If not, CORS Error will occur to indicate this domain is not allowed to access server data

Pre flight

Overview

• The request other than simple request will send the preflight request to see if the CORS protocol is understood and a server is aware using specific methods and headers.

• It is an OPTIONS request, using two or three HTTP request headers: Access-Control-Request-Method, Origin, and optionally Access-Control-Request-Headers

Simple Request

Here is the conditions of simple request, all conditions must be met:

1. HTTP Methods: The request must use an HTTP method that is considered safe, which includes GET, HEAD, and POST.

2. Custom Headers: The request can only include a limited set of headers that are considered simple headers. Simple headers include common headers like Accept, Accept-Language, Content-Language, and a few others. Custom headers that are not part of the simple headers list will trigger a preflight request.

3. Content-Type: If the request includes an Content-Type header, it must have one of the following values: application/x-www-form-urlencoded, multipart/form-data, or text/plain.

4. No Readable Stream: The request body must not contain a readable stream. It should only be in a format that can be easily serialized, such as a string or a form data object.

CORS Response Header

Access-Control-Allow-Origin

• This header is included in the response from the server to indicate which origins are allowed to access the requested resource. It specifies a single origin or uses the wildcard "*" to allow access from any origin.

Access-Control-Allow-Methods

• This header specifies the HTTP methods that are allowed when making cross-origin requests. It lists the methods that the server supports for the requested resource.

Access-Control-Allow-Headers

• This is used in response to a preflight request. It lists the headers that the server supports for the requested resource.

Access-Control-Expose-Headers

• This header lists the headers that are exposed and can be accessed by the client in the response. By default, only a few headers are accessible in JavaScript, but this header allows additional headers to be exposed.

Access-Control-Allow-Credentials

• This header indicates whether the request can include credentials (such as cookies, HTTP authentication, or client-side SSL certificates) when making a cross-origin request. It can have a value of "true" to allow credentials or "false" to disallow them.

• Access-Control-Allow-Origin cannot be set *if it is needed to set true

Access-Control-Max-Age

• This header specifies the maximum time, in seconds, that the preflight response (OPTIONS request) can be cached by the browser. Caching the preflight response can reduce the number of preflight requests sent to the server.

Solutions

Access-Control-Allow-Origin

• Whitelist the domain the name by adding Access-Control-Allow-Origin

app.use(
  cors({
    origin: "*",
    methods: ["GET", "POST"],
    allowedHeaders: "Content-Type, Authorization, X-Requested-With",
  })
);

Proxy Server

• Set up proxy server which is widely opened for domains

• Then, Make a call to the resource server

• Doing server-server communication instead of browser-server communication

• https://cors-anywhere.herokuapp.com is one of the example

Reference

3 Ways to Fix the CORS Error — and How Access-Control-Allow-Origin worksMedium