Frontend on localhost:3000 gets errors calling FastAPI on localhost:8000. Name and fix?

WHAT THIS TESTS: 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.

A GOOD ANSWER COVERS: 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.

COMMON WRONG ANSWERS: 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.

LIKELY FOLLOW-UPS: 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.

ONE 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.