ReviewMyCodes.comBuild with AI • Validate with Humans

FastAPI backend blocked by CORS when called from my React app (#HYMUV9) | ReviewMyCodes

API & Integrations

Solution proposed

Example from the ReviewMyCodes team

FastAPI backend blocked by CORS when called from my React app

MAQSOOD AHMED

Asked 2 weeks ago · edited

PythonFastAPIReact#example #cors #fastapi

Description

My React app (http://localhost:5173) calls my FastAPI API (http://localhost:8000). The request works in Postman but fails in the browser. — This is an example problem from the ReviewMyCodes team, showing how a good question looks. Real community questions appear alongside it.

Expected

The browser should receive the JSON response.

Actual

Access to fetch at 'http://localhost:8000/items' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Steps to reproduce

Start FastAPI with uvicorn
Start the React dev server
Click "Load items"

Code

python

from fastapi import FastAPI

app = FastAPI()

@app.get("/items")
def list_items():
    return [{"id": 1, "name": "Keyboard"}]

Know how to fix this?

Propose a solution, or ask a question first if something is unclear.

Ask a question Propose a solution

Discussion (0)

Proposed solutions (1)

MAQSOOD AHMED

2 weeks ago

Awaiting requester test

Browsers block cross-origin requests unless the server says the origin is allowed. Postman isn't a browser, so it ignores CORS. Add FastAPI's CORSMiddleware and list your frontend's exact origin (don't use "*" together with credentials). In production, list your real domain instead of localhost. — Example solution from the ReviewMyCodes team.

Proposed fix

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

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:5173"],  # add your production domain too
    allow_methods=["*"],
    allow_headers=["*"],
)

How it was tested

Restarted uvicorn, reloaded the React app: the request returns 200 and the response has Access-Control-Allow-Origin: http://localhost:5173.