Frontend on localhost:3000 gets errors calling FastAPI on localhost:8000. Name and fix?
This tests whether different ports mean different origins, causing CORS errors. A strong answer names CORS, notes ports are distinct origins, and outlines using CORSMiddleware with allow_origins.
What's really being asked
This question checks whether you understand the browser same-origin policy and Cross-Origin Resource Sharing. Many developers assume localhost is a single origin, but the browser treats protocol, host, and port as a tuple. Because the frontend runs on port 3000 and the backend on port 8000, they are different origins. The interviewer wants to see if you can diagnose the CORS error from symptoms alone and configure the server correctly rather than working around the browser.
The full answer
A good answer hits four things in order. First, name the error as a CORS error, specifically that the browser blocked the request because the origins differ. Second, define origin precisely as the combination of protocol, domain, and port, giving the example that http://localhost:3000 and http://localhost:8000 are different origins even though they share localhost. Third, explain the fix by importing CORSMiddleware from fastapi.middleware.cors and adding it to the app with app.add_middleware. Fourth, mention setting allow_origins to a list containing the frontend origin, such as http://localhost:3000, and optionally discuss allow_credentials, allow_methods, and allow_headers for completeness.
The mistakes people make
Common wrong answers include suggesting the developer disable CORS in the browser via flags or plugins, which is not a real solution. Another red flag is claiming the ports do not matter because both use localhost, which shows a fundamental misunderstanding of the origin model. Some candidates suggest using a wildcard allow_origins of star for every environment without mentioning the security trade-offs, particularly when credentials are involved. A weaker answer might describe proxying the frontend through the backend port to avoid CORS without being able to explain why that works.
What usually comes next
Interviewers often follow up by asking what happens if the frontend sends a preflight OPTIONS request, and you should know that CORSMiddleware handles this automatically. They may ask whether you should use a wildcard in production, and the correct stance is to avoid it when cookies or authorization headers are used. Another follow-up is how to handle multiple allowed origins by checking the request origin dynamically rather than hardcoding a list, though for a local setup a static list is fine.
A concrete example
You have a React app on http://localhost:3000 calling a FastAPI endpoint at http://localhost:8000/api/data. The browser console shows a CORS error. In main.py, you write from fastapi.middleware.cors import CORSMiddleware, then app.add_middleware with CORSMiddleware, allow_origins set to http://localhost:3000, allow_credentials set to True, allow_methods set to a list including GET and POST, and allow_headers set to a list including Content-Type. After restarting the backend, the browser permits the request.
Interview question
Why does a browser block a frontend on localhost:3000 from calling a FastAPI backend on localhost:8000, and what is the proper fix?
- a.They are the same origin because both use localhost; the error means the API endpoint requires authentication headers.
- b.The browser considers them different origins because the ports differ; add CORSMiddleware to FastAPI with the frontend origin in allow_origins.Correct
- c.You should set allow_origins to ["*"] in FastAPI so any origin can access the backend without restrictions.
- d.The proper fix is to install a browser extension that disables CORS for local development, avoiding server changes.
Why? this is the answer
The browser treats protocol, host, and port as an origin tuple, so localhost:3000 and localhost:8000 are cross-origin and CORSMiddleware must explicitly allow the frontend. The distractor that claims they are the same origin because they share localhost reflects a fundamental misunderstanding of the same-origin policy.
Just read this? Test yourself on what you have been reading.
Read the original → fastapi.tiangolo.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on fastapi — each one lists the topics its interview covers.
See open roles