-
- Joined
- Mar 22, 2026
-
- Messages
- 272
-
- Reaction score
- 0
-
- Points
- 0
Cross-Origin Resource Sharing (CORS) is a browser security feature that often causes headaches for web developers. It's a mechanism that allows web applications running at one domain (origin) to make requests to a resource at a different domain. Without CORS, the browser's Same-Origin Policy (SOP) would strictly prevent such interactions, leading to various "blocked by CORS policy" errors.
The Same-Origin Policy (SOP)
Before diving into CORS, it's crucial to understand its foundation: the Same-Origin Policy. SOP is a critical security concept enforced by web browsers. It dictates that a web browser permits scripts contained in a first web page to access data in a second web page only if both web pages have the same origin. An "origin" is defined by the combination of protocol (scheme), host (domain), and port.
For example:
SOP prevents malicious scripts on one site from accessing sensitive data on another site, like reading cookies, local storage, or making authenticated requests on behalf of the user.
How CORS Works
CORS provides a secure way to relax the SOP under controlled conditions. It works by adding specific HTTP headers that allow servers to explicitly specify which origins are permitted to access their resources. The browser then enforces these policies.
There are two main types of CORS requests:
1. Simple Requests:
These requests meet a specific set of criteria:
* Methods:
* Headers: Only a few "safe" headers are allowed (e.g.,
* No event listeners are registered on any
* No
For simple requests, the browser sends the request directly with an
Example Request Headers (from
Example Response Headers (if allowed):
2. Preflight Requests:
Requests that do not qualify as "simple" (e.g., using
The preflight request includes headers like:
*
*
*
The server must respond to the
Example Preflight Request Headers:
Example Preflight Response Headers (if allowed):
Once the preflight is successful, the browser sends the actual
Key CORS Headers
Common CORS Issues and Solutions
The most common CORS error is: "Access to fetch at 'api.com' from origin 'client.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
This error means the server hosting
Solutions:
1. Configure Server-Side CORS: This is the most robust solution. Your backend API needs to be configured to send the correct CORS headers.
* Node.js (Express): Use the
* Other Frameworks/Languages: Similar middleware or configuration options exist (e.g., Flask-CORS for Python, Spring Web MVC for Java, Nginx/Apache configurations).
2. Proxy Server (Development): During development, you can configure your frontend development server (e.g., Webpack Dev Server, Vue CLI, Create React App) to proxy API requests to bypass CORS. The browser sees requests going to
Example (Create React App
Security Considerations
While CORS helps relax SOP, it's crucial to implement it securely:
CORS is a fundamental part of modern web security. Understanding its mechanics and how to correctly configure it on your server-side applications is essential for building robust and secure web applications.
The Same-Origin Policy (SOP)
Before diving into CORS, it's crucial to understand its foundation: the Same-Origin Policy. SOP is a critical security concept enforced by web browsers. It dictates that a web browser permits scripts contained in a first web page to access data in a second web page only if both web pages have the same origin. An "origin" is defined by the combination of protocol (scheme), host (domain), and port.
For example:
http://example.com/page1.htmlandhttp://example.com/page2.htmlare same-origin.http://example.com/page1.htmlandhttps://example.com/page2.htmlare *not* same-origin (different protocol).http://example.com:8080andhttp://example.com:80are *not* same-origin (different port).http://sub.example.comandhttp://example.comare *not* same-origin (different host/subdomain).
SOP prevents malicious scripts on one site from accessing sensitive data on another site, like reading cookies, local storage, or making authenticated requests on behalf of the user.
How CORS Works
CORS provides a secure way to relax the SOP under controlled conditions. It works by adding specific HTTP headers that allow servers to explicitly specify which origins are permitted to access their resources. The browser then enforces these policies.
There are two main types of CORS requests:
1. Simple Requests:
These requests meet a specific set of criteria:
* Methods:
GET, HEAD, POST* Headers: Only a few "safe" headers are allowed (e.g.,
Accept, Accept-Language, Content-Language, Content-Type with specific values like application/x-www-form-urlencoded, multipart/form-data, or text/plain).* No event listeners are registered on any
XMLHttpRequestUpload object used in the request.* No
ReadableStream object is used in the request.For simple requests, the browser sends the request directly with an
Origin header indicating the requesting domain. The server then responds with an Access-Control-Allow-Origin header. If the value of this header matches the Origin of the request (or is * for any origin), the browser allows the response to be read by the web page. Otherwise, the browser blocks the response.Example Request Headers (from
http://client.com to http://api.com):
Code:
GET /data HTTP/1.1
Host: api.com
Origin: http://client.com
User-Agent: Mozilla/5.0...Example Response Headers (if allowed):
Code:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://client.com
Content-Type: application/json2. Preflight Requests:
Requests that do not qualify as "simple" (e.g., using
PUT or DELETE methods, custom headers, or Content-Type like application/json) trigger a "preflight" request. Before sending the actual request, the browser first sends an OPTIONS request to the server. This preflight request asks the server for permission to send the actual request.The preflight request includes headers like:
*
Access-Control-Request-Method: Indicates the HTTP method of the actual request (e.g., PUT, DELETE).*
Access-Control-Request-Headers: Lists any custom headers the actual request will send.*
Origin: The origin of the requesting page.The server must respond to the
OPTIONS request with appropriate CORS headers to indicate whether the actual request is allowed. If the preflight response is positive, the browser proceeds with the actual request. If not, the actual request is never sent, and a CORS error is reported.Example Preflight Request Headers:
Code:
OPTIONS /resource HTTP/1.1
Host: api.com
Origin: http://client.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header, Content-TypeExample Preflight Response Headers (if allowed):
Code:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://client.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 86400 // Cache preflight response for 24 hoursOnce the preflight is successful, the browser sends the actual
PUT request.Key CORS Headers
Origin: Sent by the browser, indicating the origin of the request.Access-Control-Allow-Origin: Sent by the server, specifying which origins are allowed to access the resource. Can be*(for any origin) or a specific origin.Access-Control-Allow-Methods: Sent by the server in a preflight response, listing allowed HTTP methods.Access-Control-Allow-Headers: Sent by the server in a preflight response, listing allowed custom headers.Access-Control-Max-Age: Sent by the server in a preflight response, indicating how long the results of a preflight request can be cached.Access-Control-Allow-Credentials: Sent by the server, indicating whether the browser should expose the response when the request's credentials flag is true (i.e., when cookies, HTTP authentication, or client-side SSL certificates are sent). This header cannot be used withAccess-Control-Allow-Origin: *.
Common CORS Issues and Solutions
The most common CORS error is: "Access to fetch at 'api.com' from origin 'client.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."
This error means the server hosting
api.com did not send the Access-Control-Allow-Origin header, or its value did not match http://client.com.Solutions:
1. Configure Server-Side CORS: This is the most robust solution. Your backend API needs to be configured to send the correct CORS headers.
* Node.js (Express): Use the
cors middleware.
Code:
javascript
const express = require('express');
const cors = require('cors');
const app = express();
// Allow all origins (for development, be specific in production!)
app.use(cors());
// Or allow specific origins
// app.use(cors({
// origin: 'http://client.com'
// }));
app.get('/data', (req, res) => {
res.json({ message: 'Hello from API!' });
});
app.listen(3000, () => console.log('API listening on port 3000'));2. Proxy Server (Development): During development, you can configure your frontend development server (e.g., Webpack Dev Server, Vue CLI, Create React App) to proxy API requests to bypass CORS. The browser sees requests going to
http://localhost:3000/api/data, which is same-origin, and the dev server forwards it to http://api.com/data.Example (Create React App
package.json):
Code:
json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": { /* ... */ },
"scripts": { /* ... */ },
"proxy": "http://api.com" // All unknown requests go here
}Security Considerations
While CORS helps relax SOP, it's crucial to implement it securely:
- Avoid
Access-Control-Allow-Origin: *in production if your API handles sensitive user data or requires authentication. This allows *any* website to make requests to your API, potentially leading to CSRF-like vulnerabilities ifAccess-Control-Allow-Credentialsis also used. - Be explicit with origins: Specify the exact domains that should be allowed to access your API. You can often check the
Originheader in the incoming request and dynamically setAccess-Control-Allow-Originto that value if it's in your whitelist. - Understand
Access-Control-Allow-Credentials: When this header is set totrue, the browser sends cookies and HTTP authentication credentials with cross-origin requests. IfAccess-Control-Allow-Originis**andAccess-Control-Allow-Credentialsistrue, the browser will not allow the response to be read. You must* specify a concrete origin when credentials are involved.
CORS is a fundamental part of modern web security. Understanding its mechanics and how to correctly configure it on your server-side applications is essential for building robust and secure web applications.