What is CORS? : Explained

Understanding CORS: A Complete Guide If you've ever built a web application that fetches data from another domain and encountered a CORS error, you're not alone! This guide will break down CORS, why it exists, how it works, and how to fix common CORS issues. What is CORS? CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers to restrict how resources are requested from different origins (domains, protocols, or ports). It prevents malicious websites from making unauthorized requests to a different domain on behalf of the user. For example, if your frontend is hosted on https://myfrontend.com and tries to fetch data from https://api.mybackend.com, the browser blocks the request unless the backend explicitly allows it. How CORS Works To better understand how CORS works, it's helpful to look at a diagram. Consider a web page hosted on Domain A that wants to request data from a server hosted on Domain B. When Domain A makes an HTTP request, the browser asks the server on Domain B if it can send the request from Domain A. This confirmation request is called a Preflight request. The server on Domain B confirms whether it accepts requests from Domain A or not through CORS Headers (e.g. Access-Control-Allow-Origin, Allow-Control-Allow-Method, etc). Once the preflight request is successful, the browser makes the request to Domain B. Let's say in another scenario the server on Domain B didn't allow any requests from Domain A. In that case, the browser blocks the request and returns an error. Hence Domain A is unable to access the said resource from the server on Domain B. That's precisely what CORS is. History of CORS Before CORS, web security relied on the Same-Origin Policy (SOP), introduced in the 1990s to prevent unauthorized access between different domains. The Same-Origin Policy restricted JavaScript from making requests to a domain different from the one that loaded the script. The restriction protected user data, but also limited functionality, making it difficult for web applications to interact with APIs from different domains. Why Was CORS Introduced? As web applications became more dynamic and started integrating with third-party services (like APIs, cloud storage, and payment gateways), the Same-Origin Policy became too restrictive. To allow safe cross-origin requests while maintaining security, browsers introduced CORS (Cross-Origin Resource Sharing) in the late 2000s. CORS provides a way for servers to explicitly allow or deny requests from other domains using HTTP headers. Major Security Incidents Before CORS 1. Cross-Site Request Forgery (CSRF) Attacks Before CORS, attackers exploited CSRF vulnerabilities to trick users into performing unwanted actions on other websites where they were logged in.

Feb 17, 2025 - 07:43

Understanding CORS: A Complete Guide

If you've ever built a web application that fetches data from another domain and encountered a CORS error, you're not alone! This guide will break down CORS, why it exists, how it works, and how to fix common CORS issues.

What is CORS?

CORS (Cross-Origin Resource Sharing) is a security feature implemented by web browsers to restrict how resources are requested from different origins (domains, protocols, or ports). It prevents malicious websites from making unauthorized requests to a different domain on behalf of the user.

For example, if your frontend is hosted on https://myfrontend.com and tries to fetch data from https://api.mybackend.com, the browser blocks the request unless the backend explicitly allows it.

How CORS Works

To better understand how CORS works, it's helpful to look at a diagram. Consider a web page hosted on Domain A that wants to request data from a server hosted on Domain B.

When Domain A makes an HTTP request, the browser asks the server on Domain B if it can send the request from Domain A. This confirmation request is called a Preflight request.

The server on Domain B confirms whether it accepts requests from Domain A or not through CORS Headers (e.g. Access-Control-Allow-Origin, Allow-Control-Allow-Method, etc). Once the preflight request is successful, the browser makes the request to Domain B.

Let's say in another scenario the server on Domain B didn't allow any requests from Domain A. In that case, the browser blocks the request and returns an error. Hence Domain A is unable to access the said resource from the server on Domain B. That's precisely what CORS is.

History of CORS

Before CORS, web security relied on the Same-Origin Policy (SOP), introduced in the 1990s to prevent unauthorized access between different domains. The Same-Origin Policy restricted JavaScript from making requests to a domain different from the one that loaded the script.

The restriction protected user data, but also limited functionality, making it difficult for web applications to interact with APIs from different domains.

Why Was CORS Introduced?

As web applications became more dynamic and started integrating with third-party services (like APIs, cloud storage, and payment gateways), the Same-Origin Policy became too restrictive.

To allow safe cross-origin requests while maintaining security, browsers introduced CORS (Cross-Origin Resource Sharing) in the late 2000s.

CORS provides a way for servers to explicitly allow or deny requests from other domains using HTTP headers.

Major Security Incidents Before CORS

1. Cross-Site Request Forgery (CSRF) Attacks

Before CORS, attackers exploited CSRF vulnerabilities to trick users into performing unwanted actions on other websites where they were logged in.