Browser error: 'Access to fetch at ... from origin ... has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource' (or the preflight request fails). How do I fix CORS properly?

Cause: browsers block a web page from reading responses from a different origin (scheme + host + port) unless the server says it's allowed with CORS response headers. The error is enforced by the browser, which is why the same request works in curl, Postman or server-side code. Requests with JSON bodies, custom headers (such as Authorization) or methods like PUT/DELETE first send an OPTIONS 'preflight' request, and that must succeed too. Common triggers: the API sends no CORS headers, the OPTIONS request hits auth middleware or a 404/redirect, the server errors (500 responses often lack CORS headers, so the real error is hidden), or credentials are sent while the server answers with Access-Control-Allow-Origin: *. Fix (on the server that receives the request, not in the front-end code): 1. Allow the exact front-end origins: respond with Access-Control-Allow-Origin: https://app.example.com (for several origins, check the request's Origin against an allow-list and echo it back, and add Vary: Origin). 2. Handle preflight: answer OPTIONS with 2xx and Access-Control-Allow-Methods and Access-Control-Allow-Headers listing what the browser asked for (for example Content-Type, Authorization). Make sure auth middleware lets OPTIONS through. 3. Cookies or other credentials: set Access-Control-Allow-Credentials: true and a specific origin; '*' is not allowed with credentials. The front end must also opt in (fetch credentials: 'include'). 4. Use the framework's middleware rather than hand-written headers: FastAPI/Starlette CORSMiddleware, the Express cors package, Django django-cors-headers, Spring @CrossOrigin / CorsConfiguration. If a proxy or CDN sits in front, make sure it passes OPTIONS through and doesn't strip the headers. 5. In local development, a dev-server proxy (Vite server.proxy, webpack devServer.proxy) makes the browser see one origin and avoids CORS altogether. Don't: use mode: 'no-cors' in fetch (it gives you an unreadable response), or reflect any Origin with credentials allowed; that lets any website make logged-in requests to your API. Verify: in the browser's Network tab, the OPTIONS request (if any) returns 2xx with the Access-Control-Allow-* headers, and the real response carries Access-Control-Allow-Origin matching your page's origin. Sources: https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors https://fastapi.tiangolo.com/tutorial/cors/ https://expressjs.com/en/resources/middleware/cors.html