I’m trying to fix a CORS error when doing local development but the error message I’m getting in the console doesn’t make sense, because it’s saying that it’s receiving a preflight response from the server, but I get the same error message even if I turn off my server. So I just want a reliable way to know if the request I see in the Network tab (including the preflight request) is being blocked by the browser or if the request was actually sent.
Here’s the error:
Access to fetch at ‘http://localhost:5000/tokens’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
The part that doesn’t make sense to me is “Response to preflight request”. If my server isn’t running, there wouldn’t be any response to the preflight request.
Ok I figured this out.
- Don’t just select “Fetch/XHR” in the Network tab. You need to also select the “Options” tab (use Ctrl+Click or Cmd+Click on macOS) to see the preflight requests that might be getting rejected.
- Once I saw the 403 response I then did an
OPTIONScurlagainst the URL while my server was turned off to make sure there wasn’t some older version of my server running without my knowing it, e.g.curl -v -X OPTIONS http://localhost:5000/tokens
In my case my preflights were getting 403 responses without my knowing it, and there was somehow another instance of my server running without my knowing it. [Later: It turned out to be Apple’s AirPlay feature running on localhost:5000.]