Оффлайн
- Регистрация
- 9 Май 2015
- Сообщения
- 1,483
- Баллы
- 155
Cross-Origin Resource Sharing (CORS) errors are among the most frequent and frustrating issues in modern web development. These errors stem from strict browser security policies that restrict how resources on a web page can be requested from another domain. While this security mechanism is essential for protecting users from malicious attacks, it often complicates communication between client-side applications and backend APIs. This expanded guide explores the eight most common CORS error types, their root causes, real-world problems that developers face, and best-practice solutions, especially in Node.js/Express environments.
1. Missing Access-Control-Allow-Origin Header
Real-World Problem
A startup deploying its frontend on Vercel and backend on Heroku finds that all API calls fail with CORS errors.
Cause
This occurs when the server doesn’t include the Access-Control-Allow-Origin header in its responses, causing the browser to block the request.
Solution
Use the cors package in Express or manually set the headers.
app.use(
cors({ origin: "" })
);
2. Preflight Request Failure (OPTIONS Method)
Real-World Problem
A SaaS platform integrates file uploads, triggering PUT requests with custom headers. These fail silently.
Cause
Browsers issue an OPTIONS request (preflight) for non-simple HTTP requests. If the server doesn’t handle it properly, the browser blocks the actual request.
Solution
Explicitly handle the OPTIONS method in Express.
app.options("/upload", cors());
3. Multiple Origin Values in Header
Real-World Problem
An app uses both Nginx and Node.js CORS middleware. Users report inconsistent access issues.
Cause
Multiple layers may inject duplicate CORS headers.
Solution
Ensure CORS headers are set only once.
curl -I
4. Credentialed Requests with Wildcard Origin
Real-World Problem
A dashboard app using cookies with withCredentials: true fails due to wildcard origin configuration.
Cause
Wildcard * is not allowed with credentialed requests.
Solution
Specify exact origins and allow credentials.
cors({ origin: whitelist, credentials: true });
5. Origin/Protocol Mismatch
Real-World Problem
Frontend hosted on https:// but backend runs on , causing a mismatch.
Cause
Exact match including protocol, domain, and port is required.
Solution
Add all variants to your origin list:
const allowedOrigins = ["", ""];
6. Invalid SSL/TLS Configuration
Real-World Problem
API hosted on a subdomain with a self-signed certificate fails all requests.
Cause
Browsers reject responses from endpoints with invalid or untrusted SSL certificates.
Solution
Use trusted CA certificates and ensure the HTTPS setup is correct.
7. Disallowed HTTP Methods
Real-World Problem
Requests using PATCH or DELETE get blocked by the browser.
Cause
The server must explicitly allow these methods in Access-Control-Allow-Methods.
Solution
Configure allowed methods correctly:
cors({ methods: ["GET", "POST", "PATCH", "DELETE"] });
8. Unauthorized Request Headers
Real-World Problem
An app sends custom headers like X-Token and X-Client, which are blocked.
Cause
Only listed headers are allowed in cross-origin requests.
Solution
Add them to Access-Control-Allow-Headers.
cors({ allowedHeaders: ["Content-Type", "X-Token"] });
Final Thoughts
CORS can be complex, but understanding how the browser enforces it and how to configure the server correctly helps prevent disruptions in development and production. By following the solutions outlined here and testing configurations thoroughly, developers can build secure and seamless integrations between frontend and backend services.