Fixing the No Access-Control-Allow-Origin Header

I just finished debuggging for several hours over this CORS middleware issue: XMLHttpRequest at ‘https://xxxxxxxxxxxxxxx.ngrok-free.app/fastAPI_endpoint' from origin ‘http://localhost:5173 or your netlify deployment URL’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Detailed Stack I was using: fastAPI to route backend requests uvicorn to run the server, hosted on default 127.0.0.1:8000 axios to send requests from the frontend TypeScript/React with Vite for frontend ngrok (free tier) to reroute a public https URL to the server address I explored $10 worth of GPT-4 assistance, all relevant StackOverFlow forums, and these close-but-no-cigar Github threads: One, Two....

July 20, 2023 · 2 min · Jae