CORS (Cross-Origin Resource Sharing) — Concepts and Errors

What is CORS?

CORS is a security feature implemented by browsers to restrict web pages from making requests to a different domain (origin) than the one that served the web page.
It helps prevent malicious websites from accessing sensitive data on other sites without permission.
A web page at origin A (like https://example.com) cannot freely make requests to origin B (like https://api.otherdomain.com) unless B explicitly allows it.

How CORS Works

When a web page makes a cross-origin HTTP request (like AJAX/fetch to another domain), the browser sends an Origin header.
The server responds with CORS headers (like Access-Control-Allow-Origin) that specify which origins are allowed to access the resource.
If the server’s response does not include the correct CORS headers, the browser blocks the response and shows a CORS error in the console.

Key CORS Headers

Access-Control-Allow-Origin: Specifies allowed origins (e.g., * for all, or specific domain).
Access-Control-Allow-Methods: Lists allowed HTTP methods (GET, POST, etc.).
Access-Control-Allow-Headers: Lists allowed custom headers.
Access-Control-Allow-Credentials: Indicates if cookies/credentials are allowed.

Simple vs Preflight Requests

Simple requests: GET, POST with simple headers — browser sends request with Origin header, expects CORS headers in response.
Preflight requests: For methods like PUT, DELETE or custom headers, the browser first sends an OPTIONS request (preflight) to check permissions before actual request.

Common CORS Errors

No ‘Access-Control-Allow-Origin’ header: Server did not send this header; browser blocks response.
Origin not allowed: Server’s Access-Control-Allow-Origin doesn’t include your site’s origin.
Credential issues: Trying to send cookies without Access-Control-Allow-Credentials: true.
Method or header not allowed: Missing or incorrect Access-Control-Allow-Methods or Access-Control-Allow-Headers.

Example Error Message

Access to fetch at 'https://api.otherdomain.com/data' from origin 
'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
 header is present on the requested resource.

How to Fix CORS Errors?

Server-side: Configure server to send proper CORS headers allowing your origin.
For development, you can use proxy servers or browser extensions to bypass CORS.
Avoid disabling CORS in browsers for production apps (unsafe).