I have a small frontend calling an API I control. Locally, the frontend runs on one localhost port and the API on another and the browser request succeeds. Once I deploy the frontend, the same request is blocked by CORS.
The API response in production includes an `Access-Control-Allow-Origin` header, but I noticed it is set to the old staging domain. The preflight response is also coming back from a proxy in front of the app, which is making me wonder whether I have two layers trying to manage the same headers.
I can make the immediate error disappear by allowing every origin, but I do not want to solve a configuration mistake with `*`. The API is meant for this one browser app plus a command-line script. There are no cookies involved; the web app sends an authorization header.
My understanding is that I should explicitly allow the production web origin, make sure `OPTIONS` requests reach a response that includes the expected headers, and leave non-browser clients out of the CORS discussion because they do not enforce it. I also need to check that the proxy is not overwriting what the API sends.
Is that the right mental model? I am especially interested in the debugging order here. CORS errors are good at making three different configuration problems look like the same red line in the console.
3 replies
Yeah, that sounds right. I’d debug it in this order: origin in the browser, then the preflight response, then any proxy layer that might be...
Yeah, that sounds right. I’d debug it in this order: origin in the browser, then the preflight response, then any proxy layer that might be rewriting headers. The old staging origin in production is the big red flag.
Also check whether the proxy is handling OPTIONS itself. If it is, the API’s CORS config can be perfect and you still get the wrong answer because the proxy answers first.
And don’t forget the preflight can succeed while the actual request still fails. I’ve seen a proxy return a clean OPTIONS response and then...
I would not start by changing the frontend at all. If the header says staging, fix that config first and confirm the response to a direct curl against the API before you chase browser noise.