---
title: "CORS (Cross-Origin Resource Sharing)"
slug: "cors"
category: "glossary"
tags: ["glossary", "frontend", "security", "http", "browser", "api", "headers"]
status: "stable"
last_updated: 2026-05-14
summary: "CORS is a browser security mechanism that uses HTTP headers to control whether a web page running on one origin can read responses from a different origin."
related:
  [
    "[[glossary/csp]]",
    "[[backend/fastapi]]",
    "[[frontend/nextjs]]",
    "[[cheatsheets/http-status-codes]]",
    "[[cheatsheets/http-status-codes]]",
  ]
---

## Overview

This page is the atomic definition. API server CORS configuration lives at [[backend/fastapi]] and [[frontend/nextjs]].

## Definition

Cross-Origin Resource Sharing (CORS) is an HTTP header-based protocol that lets a server tell browsers which external origins are permitted to read its responses. The browser enforces this: when JavaScript on `app.example.com` fetches `api.example.com`, the browser attaches an `Origin` request header. The server responds with `Access-Control-Allow-Origin`. If the origins do not match and no wildcard is present, the browser blocks the JavaScript from reading the response body. CORS does not prevent the request from reaching the server; it prevents the browser from exposing the response to the calling script. For requests with custom headers or non-simple methods (PUT, DELETE, PATCH), the browser first sends a preflight OPTIONS request. The server must respond with the appropriate `Access-Control-Allow-Methods` and `Access-Control-Allow-Headers` or the actual request is blocked. Setting `Access-Control-Allow-Origin: *` disables protection and should not be used on authenticated endpoints. [[glossary/csp]] is a distinct mechanism that controls which resources a page may load, not which responses it may read.

## When it applies

Configure CORS on every API that is consumed by browser JavaScript from a different origin. Internal same-origin APIs (Next.js API routes called by the same Next.js app) do not require CORS headers. Public read-only APIs may use wildcard origins; authenticated APIs should specify exact allowed origins.

## Example

A FastAPI backend at `api.myapp.com` adds:
```python
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://myapp.com"],
    allow_methods=["GET", "POST"],
    allow_headers=["Authorization"],
)
```
Requests from `myapp.com` succeed; requests from `evil.com` are blocked by the browser.

## Related concepts

- [[glossary/csp]] - controls resource loading policy; operates in parallel with CORS.
- [[backend/fastapi]] - FastAPI's `CORSMiddleware` is the standard way to configure CORS in Python APIs.
- [[frontend/nextjs]] - Next.js API routes support CORS via response headers or a middleware wrapper.
- [[cheatsheets/http-status-codes]] - preflight failures return 4xx status codes logged in DevTools.

## Citing this term

> See [[glossary/cors|CORS]] (llmbestpractices.com/glossary/cors).

## Related

- [[glossary/csp]]
- [[backend/fastapi]]
- [[frontend/nextjs]]
- [[cheatsheets/http-status-codes]]