How to Add CORS to FastAPI: Simple Setup Guide

To add CORS to FastAPI, import CORSMiddleware from fastapi.middleware.cors and add it to your app with allowed origins. This enables your API to accept requests from specified domains securely.

Syntax

Use CORSMiddleware to configure CORS in FastAPI. You specify allowed_origins to control which domains can access your API. Other options include allow_methods and allow_headers to control HTTP methods and headers.

python

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://example.com"],  # List of allowed domains
    allow_credentials=True,                  # Allow cookies and credentials
    allow_methods=["GET", "POST"],       # Allowed HTTP methods
    allow_headers=["*"],                    # Allowed headers
)

Example

This example shows a FastAPI app that allows CORS requests from https://example.com and http://localhost. It permits all HTTP methods and headers, enabling frontend apps on those domains to call the API.

python

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "https://example.com",
    "http://localhost",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
async def root():
    return {"message": "Hello, CORS enabled!"}

Output

When running, the API responds to requests from allowed origins with CORS headers set, enabling browsers to accept responses.

Common Pitfalls

• Setting allow_origins to ["*"] does not allow credentials like cookies; use specific origins instead.
• For development, allowing http://localhost is common, but remember to restrict origins in production.
• Not adding CORSMiddleware or misconfiguring it causes browsers to block cross-origin requests.

python

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Wrong: Using '*' with allow_credentials=True causes errors
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Right: Specify exact origins when using credentials
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://example.com"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

Quick Reference

Remember these key points when adding CORS to FastAPI:

• allow_origins: List domains allowed to access your API.
• allow_credentials: Set to True to allow cookies and credentials.
• allow_methods: HTTP methods allowed (e.g., GET, POST).
• allow_headers: Headers allowed in requests.
• Use specific origins when allow_credentials=True, not "*".

Key Takeaways

Add CORSMiddleware to your FastAPI app to enable CORS support.

Specify allowed origins explicitly, especially when allowing credentials.

Use allow_methods and allow_headers to control HTTP methods and headers.

Avoid using '*' for allow_origins with allow_credentials=True to prevent errors.

Test CORS behavior in browsers to ensure your API is accessible as expected.