Understanding CORS (Cross-Origin Resource Sharing)

Introduction

If you’ve ever seen an error like “Access to fetch at ‘https://api.example.com’ from origin ‘https://yourapp.com’ has been blocked by CORS policy”, you’ve encountered CORS Cross-Origin Resource Sharing.

What is CORS?

CORS (Cross-Origin Resource Sharing) is a mechanism that allows a web application running on one domain (e.g., frontend.com) to request resources from another domain (e.g., api.server.com) in a secure way.

Without CORS, web browsers restrict such cross-origin requests by default this is part of the Same-Origin Policy, a core web security model.

How Does CORS Work?

When your frontend app tries to fetch data from another domain, the browser first sends an HTTP request with special headers like Origin and Access-Control-Request-Method.

The server then responds with CORS-specific headers that tell the browser whether the request is allowed.

Example:

Request (Browser → Server):

GET /data HTTP/1.1
Host: api.server.com
Origin: https://frontend.com

Response (Server → Browser):

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

If the browser sees that the Access-Control-Allow-Origin matches your domain, it allows the response. Otherwise, it blocks it.

Common CORS Errors and How to Fix Them

1. “No ‘Access-Control-Allow-Origin’ header present”

Cause: The server didn’t send the required CORS header.

Fix: Add the Access-Control-Allow-Origin header to the server response.

Example in PHP:

header("Access-Control-Allow-Origin: *");

(Note: Use * only for public APIs. Use your exact domain for restricted ones.)

2. “CORS policy: Preflight request didn’t succeed”

Cause: The server didn’t handle the OPTIONS request properly.

Fix: Configure the server to respond to OPTIONS requests:

Example in PHP:

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header("Access-Control-Allow-Origin: https://frontend.com");
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
    exit(0);
}

3. “Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’”

Cause: You’re sending cookies or authentication tokens.

Fix: Use a specific origin and enable credentials:

Access-Control-Allow-Origin: https://frontend.com
Access-Control-Allow-Credentials: true

Best Practices for CORS

Allow only trusted origins – Never use * for private APIs.
Use HTTPS – Avoid mixed-content issues.
Handle preflight requests properly – Especially for PUT, DELETE, and POST methods.
Use middleware for simplicity – Most frameworks (Laravel, Express, Django) offer built-in CORS support.
Test with browser dev tools – Use the Network tab to inspect request/response headers.

What's Hot