Cross-Origin Resource Sharing (CORS) is a browser security feature that restricts how resources on a web page can be requested from another domain. While CORS is essential for security, it often leads to frustrating errors when working with APIs, microservices, or cross-domain requests in JavaScript applications.
1. CORS Policy No ‘Access-Control-Allow-Origin’ Header Present
Error Message:
Why This Happens:
Your browser blocks the request because the API doesn’t include the Access-Control-Allow-Origin header in the response. Without this header, the browser assumes the resource is restricted.
How to Fix:
Solution 1: Update Server to Allow CORS
If you control the server, modify the response headers to allow the request. Here’s how you can do it in Node.js (Express.js):
- The
Access-Control-Allow-Origin: *header allows any domain to access the resource. - Replace
*with a specific domain (http://example.com) for better security.
Solution 2: Configure CORS Middleware in Express
For fine-grained control, specify allowed origins:
2. CORS Policy Blocks Preflight Requests
Error Message:
Why This Happens:
A preflight request (OPTIONS method) is sent before the actual request when:
- The request uses non-simple headers like
Authorization,Content-Type: application/json. - The request is not a GET or POST request (e.g.,
PUT,DELETE).
If the server doesn’t handle OPTIONS requests, it will be blocked.
How to Fix:
Solution: Enable Preflight Response on the Server
Modify your backend to handle OPTIONS requests properly:
Now, your API will respond to preflight checks correctly.
3. CORS Policy Blocks Credentials Requests
Error Message:
Why This Happens:
- Your frontend is making a request with
credentials: 'include'(e.g., cookies, sessions, authentication). - The server uses
Access-Control-Allow-Origin: *, which doesn’t support credentials.
How to Fix:
Solution: Configure CORS for Credentials
Modify your backend:
Replace * with the actual domain that should be allowed to send credentials.
4. Mismatched Protocols (HTTP vs. HTTPS)
Error Message:
Why This Happens:
- Your website runs on
HTTPS, but your API runs onHTTP. - Browsers block insecure (HTTP) requests from an
HTTPSpage.
How to Fix:
- Ensure the API runs on HTTPS.
- Update API calls from
http://tohttps://. - If local development requires HTTP, use secure tunnels like ngrok to expose an HTTPS endpoint.
5. CORS Blocks Redirects
Error Message:
Why This Happens:
- The API redirects the request, but the redirect response doesn’t include CORS headers.
How to Fix:
- On the backend, set CORS headers on redirected responses:
- If using
fetch(), allow redirects:
6. Incorrect ‘Access-Control-Allow-Headers’ Configuration
Error Message:
Why This Happens:
- Your request includes custom headers (
Authorization,X-Requested-With), but the server doesn’t allow them.
How to Fix:
Modify your backend to allow the required headers:
7. Incorrect ‘Access-Control-Allow-Methods’ Configuration
Error Message:
Why This Happens:
- The requested HTTP method (PUT, DELETE, PATCH) isn’t allowed by the server.
How to Fix:
Add the correct methods to your backend:
Final Thoughts
CORS errors can be frustrating, but understanding why they happen helps you fix them quickly. Here’s a quick recap:
| CORS Error | Fix |
|---|---|
| No ‘Access-Control-Allow-Origin’ | Add CORS headers on the server |
| Blocks Preflight Requests | Handle OPTIONS requests properly |
| Blocks Credentials Requests | Allow credentials with a specific origin |
| Mixed Content (HTTP/HTTPS) | Use HTTPS for APIs |
| Redirect Issues | Ensure CORS headers are set on redirects |
| Header Restrictions | Allow necessary headers |
| Method Restrictions | Allow required HTTP methods |
You may also like:
1) 5 Common Mistakes in Backend Optimization
2) 7 Tips for Boosting Your API Performance
3) How to Identify Bottlenecks in Your Backend
4) 8 Tools for Developing Scalable Backend Solutions
5) 5 Key Components of a Scalable Backend System
6) 6 Common Mistakes in Backend Architecture Design
7) 7 Essential Tips for Scalable Backend Architecture
8) Token-Based Authentication: Choosing Between JWT and Paseto for Modern Applications
9) API Rate Limiting and Abuse Prevention Strategies in Node.js for High-Traffic APIs
10) Can You Answer This Senior-Level JavaScript Promise Interview Question?
11) 5 Reasons JWT May Not Be the Best Choice
12) 7 Productivity Hacks I Stole From a Principal Software Engineer
13) 7 Common Mistakes in package.json Configuration
Read more blogs from Here
Share your experiences in the comments, and let’s discuss how to tackle them!
Follow me on Linkedin