
Most web developers experience this issue at least once(in my case, many times) in their lifetime until they learn about the CORS policy concept.

The below are the most common issue if did't handles the CORS properly.

<div class="highlight-error">
Access to fetch at 'http://localhost:44383/admin/authenticate' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled
</div>

![CORS policy blocked](/assets/blog/helpers/cors-issue.png)

<div class="highlight">

_Cross-Origin Resource Sharing (CORS)_ is a security feature that lets a web page from one domain request resources from a different domain.

</div>
Here’s a simple breakdown to help you understand it better:

### What is CORS?

CORS allows a web page to request resources (like CSS files or API data) from a different domain.
For ex: if your web page is hosted on domain-ABC.com, it can request resources from domain-XYZ.com.

### How Does CORS Work?

- CORS uses HTTP headers to tell browsers whether different domains are allowed to access resources. Here are some key headers:

  - <span class="highlight-small">Access-Control-Allow-Origin:</span> Specifies which domains can access the response.
  - <span class="highlight-small">Access-Control-Allow-Credentials:</span> Indicates if the response can include credentials (like cookies).
  - <span class="highlight-small">Access-Control-Allow-Headers:</span> Lists which headers can be used in the request.
  - <span class="highlight-small">Access-Control-Allow-Methods:</span> Lists which HTTP methods (GET, POST, etc.) can be used.
  - <span class="highlight-small">Access-Control-Expose-Headers:</span> Lists which headers are safe to expose to the browser.
  - <span class="highlight-small">Access-Control-Request-Headers:</span> Used in preflight requests to list headers that will be used.
  - <span class="highlight-small">Access-Control-Request-Method:</span> Used in preflight requests to indicate the HTTP method that will be used.

### Types of CORS Requests

<div class="list-number">

- Simple Requests:

  - Do not trigger a preflight check.
  - Use only safelisted headers.
  - Methods: GET, POST, HEAD.

- Preflight Requests:

  - Send an "OPTIONS" request before the actual request.
  - The server checks if the actual request is safe to allow.
  - Necessary for requests that may affect user data or make significant changes on the server.

</div>

### Why Use CORS?

CORS enhances security by controlling how resources on one domain can be accessed by another. It ensures that only allowed domains can access your resources, protecting your data and users.

### Example Flows

<div class="list-number">

- Simple Request:

  - 1. Client: domain-ABC.com makes a GET request to domain-XYZ.com/resource.
  - 2. Server: domain-XYZ.com responds with the resource and `Access-Control-Allow-Origin: domain-ABC.com`.
  - 3. Browser: Checks the `Access-Control-Allow-Origin` header. If domain-ABC.com matches, it allows the resource to be accessed by the web page.

- Preflight Request:

  - 4. Client: domain-ABC.com wants to send a PUT request to domain-XYZ.com/resource. Sends an OPTIONS request first.
  - 5. Server: domain-XYZ.com responds to OPTIONS request with `Access-Control-Allow-Methods: PUT` and `Access-Control-Allow-Headers: Content-Type`.
  - 6. Client: Sends the actual PUT request if allowed.
  - 7. Server: Responds to the PUT request and includes `Access-Control-Allow-Origin: domain-ABC.com`.
  - 8. Browser: Checks the `Access-Control-Allow-Origin` header. If domain-ABC.com matches, it allows the resource to be accessed by the web page.

</div>

By setting up CORS correctly, your web pages can safely request resources from other domains, keeping your web applications secure.


Cross-Origin Resource Sharing (CORS) is a security feature that lets a web page from one domain request resources from a different domain

More Stories related to 'cors'

Also read the similar topics