Fix CORS Error in FastAPI: Step-by-Step Guide

Resolve 'No Access-Control-Allow-Origin header' errors in your FastAPI application

Beginner 15 min Troubleshooting 5 steps

Overview

You're getting a CORS (Cross-Origin Resource Sharing) error when trying to access your FastAPI from a frontend application running on a different domain or port.

What You'll Learn:

  • What CORS is and why it exists
  • How to configure CORS in FastAPI
  • Common CORS configuration mistakes
  • How to test your CORS setup
1

Understand What's Happening

Estimated: 2 min

CORS (Cross-Origin Resource Sharing) is a security feature in browsers that blocks requests from different origins (domain, protocol, or port). Your browser is protecting users by not allowing arbitrary websites to access your API.

info

CORS is a browser security feature, not a FastAPI limitation

warning

Even if your API works in Postman, it may fail in the browser due to CORS

tip

Different ports (e.g., :8000 vs :3000) count as different origins

Quick Check

Why does CORS exist?

2

Import CORSMiddleware

Estimated: 1 min

FastAPI provides built-in CORS support through middleware. First, import the CORSMiddleware from fastapi.middleware.cors.

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

app = FastAPI()

The CORSMiddleware handles all CORS-related headers automatically

3

Choose Your CORS Strategy

Estimated: 3 min

You need to decide which origins (domains) are allowed to access your API. Choose based on your environment.

Choose your approach:

Development (Allow All Origins)

Quick setup for local development. NOT recommended for production.
python 
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# WARNING: Only for development!
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Allows all origins
    allow_credentials=True,
    allow_methods=["*"],  # Allows all methods
    allow_headers=["*"],  # Allows all headers
)
Production (Specific Origins)

Secure setup that only allows specific domains. Recommended for production.
python 
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Production-ready CORS configuration
origins = [
    "https://yourfrontend.com",
    "https://www.yourfrontend.com",
    "http://localhost:3000",  # For local frontend testing
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,  # Only these origins allowed
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE"],  # Specify methods
    allow_headers=["*"],
)
Environment-Based (Best Practice)

Different CORS settings for development and production using environment variables.
python 
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import os

app = FastAPI()

# Get environment
ENVIRONMENT = os.getenv("ENVIRONMENT", "development")

# Configure origins based on environment
if ENVIRONMENT == "production":
    origins = [
        "https://yourfrontend.com",
        "https://www.yourfrontend.com",
    ]
else:
    origins = [
        "http://localhost:3000",
        "http://localhost:5173",
        "http://localhost:8080",
    ]

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

Verify Your CORS Setup

Estimated: 5 min

Let's make sure CORS is working correctly by testing your API from the browser.

5

Troubleshoot Common Issues

Estimated: 4 min

If CORS still isn't working, here are the most common issues and their solutions.

Complete Guide