Exercise 2: Why Different Ports Are Different Origins, and What cors() Does — Possible Solution ==================================================================== WHY DIFFERENT PORTS CAUSE A REAL PROBLEM ------------------------------ The browser's same-origin policy treats a URL's scheme, host, AND port together as its "origin" - two URLs that differ only by port number are treated as two completely different origins, exactly the same as if they were on two different domains entirely. Vite's dev server (e.g. localhost:5173) and the Express server (e.g. localhost:3001) are therefore different origins from the browser's point of view, even though both are running locally on the same machine during development. WHAT HAPPENS WITHOUT CORS CONFIGURED ------------------------------ By default, browsers block a page loaded from one origin from successfully reading a response returned by a different origin, unless that other origin explicitly grants permission. Without cors() configured on the Express server, requests from the React app to the Express API get blocked by the browser itself - not because the server refused the request, but because the browser refuses to let the page read the response. WHAT cors() ACTUALLY DOES ------------------------------ The cors() middleware adds the specific response headers (like Access-Control-Allow-Origin) that tell the browser "this origin is allowed to read this response." Once Express sends those headers back, the browser permits the React app's requests to succeed instead of silently blocking them. WHY THIS WORKS AS AN ANSWER ------------------------------ It correctly explains that port number is part of what makes an origin distinct, correctly identifies that the browser (not the server) is what blocks unauthorized cross-origin reads, and correctly describes cors() as adding the response headers that grant explicit permission for the React app's origin to read the Express server's responses.