What is CORS?
CORS (Cross-Origin Resource Sharing) is a security mechanism that allows web browsers to make requests to servers on different domains than the one serving the web page. It uses HTTP headers to tell browsers which cross-origin requests should be permitted.
Quick Facts
| Full Name | Cross-Origin Resource Sharing |
|---|---|
| Created | 2004 (initial proposal), 2014 (W3C Recommendation) |
| Specification | Official Specification |
How It Works
CORS was developed to relax the Same-Origin Policy, which by default prevents web pages from making requests to different domains. When a browser makes a cross-origin request, it first sends a preflight OPTIONS request to check if the server allows the actual request. The server responds with CORS headers indicating which origins, methods, and headers are permitted. CORS is essential for modern web applications that consume APIs from different domains. Misconfigured CORS can lead to security vulnerabilities or blocked requests. Common CORS errors and solutions: 'No Access-Control-Allow-Origin header' - server must include this header with the requesting origin or '*'. 'Preflight request failed' - server must handle OPTIONS requests with appropriate headers. 'Credentials not supported with wildcard origin' - use specific origin instead of '*' when credentials are included. For development, browser extensions or proxy servers can bypass CORS, but production must implement proper server-side headers.
Key Characteristics
- Relaxes Same-Origin Policy restrictions
- Uses HTTP headers for access control
- Preflight requests check permissions
- Controlled by server-side configuration
- Supports credentials (cookies, auth headers)
- Can specify allowed origins, methods, headers
Common Use Cases
- Consuming third-party APIs
- Microservices architecture
- CDN resource loading
- Single-page applications
- Cross-domain font loading
Example
Loading code...Frequently Asked Questions
What is the difference between CORS and the Same-Origin Policy?
The Same-Origin Policy is a browser security feature that restricts web pages from making requests to different domains. CORS is a mechanism that relaxes this restriction by allowing servers to specify which origins are permitted to access their resources through HTTP headers.
Why do I get a CORS error even though my API works in Postman?
Postman is not a browser and doesn't enforce CORS restrictions. CORS is a browser-enforced security mechanism. When you make requests from a web page, the browser checks CORS headers. To fix this, configure your server to send the appropriate Access-Control-Allow-Origin headers.
What is a preflight request and when does it occur?
A preflight request is an automatic OPTIONS request sent by the browser before certain cross-origin requests to check if the actual request is safe to send. It occurs for requests that use methods other than GET, HEAD, or POST, or include custom headers, or have a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain.
Can I use Access-Control-Allow-Origin: * with credentials?
No, you cannot use the wildcard (*) for Access-Control-Allow-Origin when the request includes credentials (cookies or HTTP authentication). You must specify the exact origin. This is a security measure to prevent credential leakage to unintended origins.
How can I fix CORS issues during local development?
During development, you can: 1) Configure your backend server to allow your local origin, 2) Use a proxy server (like webpack-dev-server proxy), 3) Use browser extensions that disable CORS (not recommended for security reasons), or 4) Run a local proxy like cors-anywhere. For production, always configure proper CORS headers on the server.