Access to fetch domain-ABC from origin domain-XYZ blocked by cors policy

Ullas Kishan

Cover Image for Access to fetch domain-ABC from origin domain-XYZ blocked by cors policy

Ullas Kishan

November 18, 2024

3 min read

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.

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

CORS policy blocked

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

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

Types of CORS Requests

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.

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

Simple Request:
- 1. Client: domain-ABC.com makes a GET request to domain-XYZ.com/resource.
- 1. Server: domain-XYZ.com responds with the resource and Access-Control-Allow-Origin: domain-ABC.com.
- 1. 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:
- 1. Client: domain-ABC.com wants to send a PUT request to domain-XYZ.com/resource. Sends an OPTIONS request first.
- 1. Server: domain-XYZ.com responds to OPTIONS request with Access-Control-Allow-Methods: PUT and Access-Control-Allow-Headers: Content-Type.
- 1. Client: Sends the actual PUT request if allowed.
- 1. Server: Responds to the PUT request and includes Access-Control-Allow-Origin: domain-ABC.com.
- 1. Browser: Checks the Access-Control-Allow-Origin header. If domain-ABC.com matches, it allows the resource to be accessed by the web page.

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

Related tags

cors

More Stories

Why SVG element is not reading by NVDA screen reader

SVG elements will not add the accessibility atttributes by default, so that will fail to describe by itself, and the NVDA and other screen reader required these attributes to work.