CORS Explained

Complete guide to Cross-Origin Resource Sharing — how it works, every header explained, and common errors with fixes.

Overview

What is CORS?

Cross-Origin Resource Sharing (CORS) is an HTTP-header-based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. Browsers enforce the Same-Origin Policy by default, which blocks web pages from making requests to a different origin than the one that served the page.

The Same-Origin Policy

Two URLs have the same origin if they share the same scheme (http/https), host, and port. For example, https://app.example.com and https://api.example.com are different origins because the host differs. The Same-Origin Policy prevents a malicious site from reading sensitive data from another site — CORS is the mechanism that relaxes this restriction in a controlled way.

Simple Requests vs. Preflight

A "simple request" uses GET, HEAD, or POST with only CORS-safelisted headers and does not trigger a preflight. All other cross-origin requests — those using methods like PUT or DELETE, or including headers like Authorization — trigger a preflight: the browser first sends an OPTIONS request to ask the server for permission before sending the actual request.

How CORS Works

Simple Request

Browser

GET /api/data
Origin: https://app.example.com

↓

Server

200 OK
Access-Control-Allow-Origin: *

↓

✓ Response shared with JS

Preflight Request

Browser

OPTIONS /api/data
Access-Control-Request-Method: DELETE

↓

Server

204 No Content
Access-Control-Allow-Methods: DELETE

↓

Browser

DELETE /api/data
Origin: https://app.example.com

↓

✓ Response shared with JS

CORS Headers

Showing 10 of 10

Common Errors

Showing 8 of 8

Related Guides

61 status codes

HTTP Status Codes

Complete reference of all HTTP status codes with descriptions and examples.

Browse

36 headers

HTTP Headers

Common HTTP headers explained with syntax, examples, and common values.

Browse

9 methods

HTTP Methods

Complete guide to HTTP request methods with comparison tables and examples.

Browse

70 MIME types

MIME Types

Complete reference of common MIME types with file extensions, categories, and usage examples.

Browse

Try it in RequestDock

Send real HTTP requests and inspect responses — right in your browser.

Open RequestDock

Overview

What is CORS?

The Same-Origin Policy

Simple Requests vs. Preflight

How CORS Works

Simple Request

Preflight Request

CORS Headers

Access-Control-Allow-OriginResponseRequired

Access-Control-Allow-MethodsResponseRequired

Access-Control-Allow-HeadersResponseRequired

Access-Control-Allow-CredentialsResponseOptional

Access-Control-Expose-HeadersResponseOptional

Access-Control-Max-AgeResponseOptional

Access-Control-Request-MethodRequestRequired

Access-Control-Request-HeadersRequestOptional

OriginRequestRequired

VaryResponseOptional

Common Errors

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

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when the request's credentials mode is 'include'.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Access to fetch at 'https://api.example.com/data' (redirected from 'https://api.example.com/old') from origin 'https://app.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.

Refused to get unsafe header 'X-Request-Id'

Related Guides

HTTP Status Codes

HTTP Headers

HTTP Methods

MIME Types

Try it in RequestDock