🌐 Code Snippet
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
This code adds CORS (Cross-Origin Resource Sharing) support to your FastAPI app.
CORS defines which web apps or domains are allowed to make API requests to your server.
Without it, browsers block requests from other origins (for security reasons).
app.add_middleware(CORSMiddleware, ...)
This means:
Add a middleware layer that handles CORS rules before the request reaches your FastAPI routes.
🧱 Middleware = something that runs between the client request and your route logic.
It can modify requests, add headers, log data, or enforce security policies.
allow_origins=["*"]
This tells FastAPI:
Allow requests from any domain (i.e.,
*
= all websites).
✅ Example:
Requests from http://localhost:3000
Requests from https://yourfrontend.com
All will be accepted.
⚠️ Security Tip:
In production, you should replace "*"
with specific domains:
allow_origins = ["https://yourfrontend.com"]
allow_credentials=True
This allows the browser to include:
Cookies
Authorization headers
TLS client certificates
✅ Example:
If your frontend sends a request with a user session cookie, FastAPI will accept it.
allow_methods=["*"]
This means:
Allow all HTTP methods like GET, POST, PUT, DELETE, PATCH, etc.
✅ Example:
Your API can be accessed by any type of request from any frontend.
allow_headers=["*"]
This allows:
All types of headers (like
Content-Type
,Authorization
,X-Custom-Header
, etc.)
✅ Without this, browsers may block requests that send custom headers.
Parameter | Meaning | Example |
---|---|---|
allow_origins=["*"] |
Allow requests from any domain | Any website can call your API |
allow_credentials=True |
Allow cookies & auth headers | Needed for login systems |
allow_methods=["*"] |
Allow all HTTP methods | GET, POST, PUT, DELETE |
allow_headers=["*"] |
Allow all request headers | Authorization , etc. |
You built:
A backend → FastAPI at http://127.0.0.1:8000
A frontend → React app at http://localhost:3000
If you don’t enable CORS, the browser will block your React app from calling FastAPI due to “Cross-Origin Request Blocked” errors.
So, this middleware ensures your frontend can safely talk to your backend. 🔄