How do you configure CORS in FastAPI?

Question

Accepted Answer

**CORS** (Cross-Origin Resource Sharing) is a browser security mechanism controlling whether a web page from one **origin** can call your API on a different origin. FastAPI configures it with the built-in **`CORSMiddleware`**. You'll hit CORS whenever a frontend on a different domain/port calls your API.

## The problem CORS addresses

```text
A React app at http://localhost:3000 calling an API at http://localhost:8000 is
CROSS-ORIGIN (different port). The BROWSER blocks the response unless the API
sends CORS headers permitting that origin.
(origin = scheme + host + port)
```

## Configuring CORSMiddleware

```python
from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://app.example.com", "http://localhost:3000"],  # ALLOWLIST of origins
    allow_credentials=True,         # allow cookies/auth (requires specific origins, not "*")
    allow_methods=["*"],             # or ["GET", "POST", ...]
    allow_headers=["*"],
)
```

The middleware adds the necessary CORS response headers, telling the browser which origins, methods, and headers are permitted. The browser enforces these rules.

## Security: restrict origins (don't use "*")

```python
# ❌ allowing all origins — convenient but insecure for credentialed/private APIs
allow_origins=["*"]
# ✅ restrict to your known frontend origins (an allowlist)
allow_origins=["https://app.example.com"]
# NOTE: allow_credentials=True is INCOMPATIBLE with allow_origins=["*"]
```

For production, **restrict `allow_origins` to an allowlist** rather than `*`. Also, allowing credentials (cookies/auth) requires specific origins — the wildcard isn't allowed with credentials.

## A key misconception

```text
CORS is enforced by the BROWSER, not the server. It does NOT protect your API from
non-browser clients (curl, Postman, other servers) — those ignore CORS entirely.
CORS only governs what browser JavaScript from other origins may do.
```

## Why it matters

CORS is one of the most common stumbling blocks in web development — nearly every frontend-to-API setup hits it (especially in local development with different ports, and in production with a separate frontend domain), so knowing how to configure it with FastAPI's `CORSMiddleware` is practical, frequently-needed knowledge.

Understanding *why* it exists (browser same-origin security), how the server opts in via response headers, and how to configure it (allowed origins, methods, headers, credentials) is necessary to connect frontends to FastAPI APIs without requests being blocked.

Equally important is configuring it **securely** — restricting `allow_origins` to a specific allowlist rather than the permissive `*` (and understanding that credentials are incompatible with the wildcard) — and grasping the crucial misconception that **CORS is a browser mechanism, not API authorization** (it doesn't protect against non-browser clients).

Knowing how to set up CORS correctly and securely is important everyday knowledge for any FastAPI API consumed by a web frontend.