CORS Unraveled: Taming Cross-Origin Requests

Are you a web developer? If yes, then you’ve likely encountered the confounding CORS error. Picture this: you’re diligently building a web application, and suddenly, your browser spits out a cryptic message about cross-origin restrictions. This is where CORS, or Cross-Origin Resource Sharing, comes into play. Let’s embark on a journey to decipher this enigma.

Understanding Origins: The Bedrock of Web Interaction

Before we dive into CORS intricacies, it’s crucial to grasp the significance of origins in the realm of web development.

Origin is a web address that we use to access any resource. Now this resource can be a webpage (like HTML, CSS, Javascript) or it can be some data from the backend. Origin can be divided into three fundamental components

• Scheme: It is the first part of origin and can be HTTP or HTTPS
• Host: It is the domain name to access the resource. It can be something.com.
• Port: It is an endpoint through which the server communicates
• Path (optional): Path is an endpoint to access a specific resource. Like to fetch only the Login page from the backend to load in the browser. This reduces the loading time.

Now, the pivotal question arises: Why do CORS errors occur?

Browsers, in the interest of safeguarding data privacy, impose restrictions on sharing resources across disparate origins. This is a vital measure taken to prevent unauthorised access and maintain the integrity of sensitive information.

Demystifying CORS Mechanics

CORS operates through a series of HTTP headers exchanged between the client’s browser and the server. Here’s a step-by-step breakdown:

• Origin Request Header:

When a web page makes a request for a resource from a different origin (i.e., a different Scheme, Host, or Port), the browser includes an Origin header in the HTTP request.

• Preflight Request (Optional):

For certain types of requests (such as those with custom headers or non-standard HTTP methods), the browser may send a preflight request with an HTTP method of OPTIONS to the target server before sending the actual request. This preflight request seeks permission from the server to make the actual request.

• Server-Side Handling:

The server receives the request and checks for the presence of the Origin header. It then determines whether to allow or deny the request based on its CORS policy.

• CORS Headers:

If the server grants permission, it includes specific CORS headers in the response to inform the browser that the resource can be accessed. These headers include:

• Access-Control-Allow-Origin: Specifies which origins are permitted to access the resource.
• Access-Control-Allow-Methods: Lists the HTTP methods allowed for this resource.
• Access-Control-Allow-Headers: Specifies which headers can be used in the actual request.
• Access-Control-Allow-Credentials (optional): Indicates whether credentials (e.g., cookies, HTTP authentication) can be sent with the request.
• Browser Enforcement:

The browser analyses the CORS headers in the server’s response. If the response indicates that the request is permitted, the browser allows the web page to access the resource. Otherwise, it blocks the request, and a CORS error is triggered.

• Client-Side Handling of Errors:

When a CORS error occurs, JavaScript code on the web page may receive an error event. This event can be caught and handled by the developer.

Source: MDN Web Docs

Understanding CORS Error Triggers

When it comes to encountering CORS (Cross-Origin Resource Sharing) errors, it’s essential to be aware of the various scenarios that can lead to these frustrating roadblocks. Let’s explore the common situations where CORS errors tend to rear their heads and how to navigate around them.

In web development, CORS errors typically arise under specific circumstances where a web page requests resources from a different origin (Scheme, Host, or Port) than the one it originated from. The most common scenarios include:

1. Cross-Domain API Requests: When a web page hosted on one domain attempts to make an API request to a different domain.
2. Subdomain Discrepancies: Issues may arise when trying to fetch resources from subdomains, especially when they differ from the main domain.
3. Protocol Mismatch: A page using HTTP might face issues when trying to access resources on a server using HTTPS or vice versa.
4. Non-Standard Ports: Attempts to access resources on a non-standard port (anything other than 80 for HTTP or 443 for HTTPS) may trigger a CORS error.
5. Authorisation Headers: Requests that include custom headers (such as authentication tokens) can be flagged by the browser’s preflight requests, causing a CORS error.
6. Cookies and Credentials: When a request includes credentials like cookies or HTTP authentication information, the server’s response must have the appropriate CORS headers.
7. CORS Configuration on the Server: Incorrect or missing CORS headers on the server can lead to CORS errors.

Use of CORS

const app = express();
const corsOptions = {
  origin: config.FrontendOrigin,
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true,
};
app.use(cors(corsOptions));

Server will allow access to requests from config.FrontendOrigin origin. Use of credentials and cookies is also allowed.

Show some ❤️ by following me and if you like the article please give it a clap. To connect with me on other platforms visit my linktree: https://linktr.ee/kanavarora