Connecting Frontend to Backend
You've built a frontend and a backend separately. Now comes the moment of truth — making them talk to each other. This connection is where many developers hit their first real roadblocks, but understanding the common issues makes them easy to solve.
The API Contract
Your frontend and backend must agree on how they'll communicate. This agreement — sometimes called an API contract — includes the endpoint URLs, the HTTP methods (GET, POST, etc.), and the data format (usually JSON).
If your backend expects POST /api/todos with {"text": "Buy milk"}, your frontend must send exactly that. A mismatch in any detail causes failures.
Understanding CORS
When your frontend at localhost:3000 tries to fetch data from your backend at localhost:5000, the browser blocks it by default. This security feature is called Cross-Origin Resource Sharing (CORS).
CORS exists to prevent malicious websites from making requests to other sites on your behalf. For development, you need to tell your backend to allow requests from your frontend's origin.
Ask AI: "Add CORS support to my Flask app to allow requests from localhost:3000."
The fix is usually adding a few lines of configuration to your backend.
Debugging With the Network Tab
Your browser's developer tools are essential for debugging connection issues. Open DevTools (F12 or right-click → Inspect), then click the Network tab.
When you make a request from your frontend, you'll see it appear here. Click on it to see:
- Status code — 200 means success, 404 means wrong URL, 500 means server error
- Request headers and body — what your frontend actually sent
- Response body — what the backend returned
This visibility helps you pinpoint exactly where things go wrong.
Common Issues and Fixes
CORS error: Your backend needs CORS headers. Ask AI to add Flask-CORS or the equivalent for your framework.
Connection refused: Is your backend actually running? Check that it's started and listening on the expected port.
404 Not Found: The URL in your frontend doesn't match any route in your backend. Double-check the path and method.
JSON parse error: Your backend might be returning an HTML error page instead of JSON. Check your backend logs for the actual error.