CORS

Learn essential concepts of cors in FastAPI.

What You'll Learn

This section covers CORS fundamentals, including:

• Cross-Origin Resource Sharing (CORS) configuration

• Allowed origins, methods, and headers

• Credentials and pre-flight requests

• Real-world browser security patterns

• Production-ready CORS setup

Core Concepts

CORS enables browser-based clients to make cross-origin requests to your API. Without proper CORS configuration, browsers block requests from different origins for security reasons.

Key Ideas

Understanding CORS helps you:

• Allow specific domains to access your API

• Configure credentials handling securely

• Understand pre-flight requests (OPTIONS)

• Handle real-time client-server communication

• Build secure, accessible APIs

Basic CORS Example

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

app = FastAPI()

# Simple CORS configuration
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],  # Frontend origin
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE"],
    allow_headers=["*"],
)

@app.get("/api/data")
async def get_data():
    return {"message": "Data from API"}

Production CORS Configuration

# Allow multiple specific origins
origins = [
    "http://localhost:3000",
    "http://localhost:8080",
    "https://example.com",
    "https://app.example.com",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE", "PATCH"],
    allow_headers=["Content-Type", "Authorization"],
    max_age=600,  # Cache pre-flight requests for 600 seconds
)

Wildcard vs Specific Origins

# Development: Allow any origin (NOT for production)
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Unsafe for production
    allow_methods=["*"],
    allow_headers=["*"],
)

# Production: Always specify exact origins
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://app.example.com"],
    allow_credentials=True,  # Only with specific origins
)

Real-World Usage

CORS is critical for:

• **Web Applications**: SPAs (React, Vue, Angular) need CORS to call APIs

• **Mobile Apps**: May need specific origin or wildcard

• **Third-party Integration**: External services need CORS access

• **Credential Handling**: Cookies and auth headers require `allow_credentials=True`

• **Security**: Prevent unauthorized cross-origin access

🔑 Key Takeaways

• ✅ Understand the purpose of cors

• ✅ Know when to apply this pattern

• ✅ Follow best practices consistently

• ✅ Test thoroughly in production scenarios

Next step: Explore the advanced section for production patterns and optimization techniques.