Practical Guide

← Back to all articles

CORS Explained — A Complete Guide for Web Developers

February 6, 2026 • 3 min read • 467 words • 0% read

If you’ve ever seen an error like “Blocked by CORS policy” in your browser console, you’ve already met CORS — whether you wanted to or not.

CORS (Cross-Origin Resource Sharing) is one of the most misunderstood parts of modern web development, yet it plays a critical role in web security.

In this guide, you’ll learn what CORS is, why it exists, how it works behind the scenes, and how to configure it correctly in real-world applications.

What is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that controls which websites are allowed to access resources from another origin.

An origin consists of:

protocol (https)
domain (example.com)
port (443)

If any of these differ, the request is considered cross-origin.

CORS allows servers to explicitly say:

“Yes, this origin is allowed to access my resources.”

Why CORS Exists

CORS exists to protect users from malicious websites.

Without CORS, a harmful site could:

read private API responses
perform actions on behalf of a logged-in user
steal sensitive data using JavaScript

CORS is enforced by the browser, not the server.

Same-Origin Policy Explained

Before CORS, browsers introduced the Same-Origin Policy (SOP).

The rule is simple:

A webpage can only read responses from the same origin it was loaded from.

CORS is an extension of this rule — it provides a controlled way to relax SOP when needed.

How CORS Works

CORS is based on HTTP request and response headers.

The browser sends a request with an Origin header:

Origin: https://frontend.example

The server responds with CORS headers:

Access-Control-Allow-Origin: https://frontend.example

The browser checks the headers.
If allowed, the response is accessible to JavaScript.

If not — the request is blocked by the browser, even if the server returned valid data.

Preflight Requests (OPTIONS)

Some requests are considered “non-simple” and require a preflight request.

Examples:

POST with JSON
custom headers
PUT, DELETE, PATCH

The browser first sends an OPTIONS request:

OPTIONS /api/data

Origin: https://frontend.example

Access-Control-Request-Method: POST

The server must respond with permission headers before the actual request is sent.

CORS Headers Explained

Common CORS headers include:

Access-Control-Allow-Origin: https://example.com

Access-Control-Allow-Methods: GET, POST, PUT

Access-Control-Allow-Headers: Content-Type, Authorization

Access-Control-Allow-Credentials: true

Important rules:

* cannot be used with Allow-Credentials: true
Headers must match exactly what the browser requests

CORS in JavaScript (Frontend)

fetch('https://api.example.com/data', {

method: 'GET',

credentials: 'include'

})

.then(res => res.json())

.then(data => console.log(data));

If CORS is misconfigured, this request will fail before JavaScript receives any data.

CORS in Backend APIs (PHP Example)

<?php

header("Access-Control-Allow-Origin: https://frontend.example");

header("Access-Control-Allow-Methods: GET, POST, OPTIONS");

header("Access-Control-Allow-Headers: Content-Type, Authorization");

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {

http_response_code(204);

exit;

}

This configuration allows controlled cross-origin access.

Common CORS Issues

Missing Access-Control-Allow-Origin
Mismatch between requested and allowed headers
Using * with credentials
Forgetting to handle OPTIONS requests
Assuming CORS is a backend-only problem

FAQ

Is CORS a security feature?

Yes — it protects users by preventing unauthorized cross-origin access in browsers.

Does CORS affect server-to-server requests?

No. CORS is enforced only by browsers.

Can I disable CORS?

You can’t disable it in browsers — only configure your server correctly.

Why does Postman work but the browser doesn’t?

Postman doesn’t enforce CORS. Browsers do.

Is CORS the same as CSRF?

No. They solve different security problems.

Conclusion

CORS is not a bug — it’s a critical security feature.

Once you understand how origins, headers, and preflight requests work, CORS stops being frustrating and becomes predictable.

Correct CORS configuration is essential for modern APIs, SPAs, and microservices.