I'm facing a CORS issue where I get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error from one client, but the other client works fine. Here's the setup: I'm making fetch requests from two clients on my local machine: one at localhost:5174 and another at localhost:5176, both trying to access a server running on localhost:8080. The fetch request for the client at 5174 works and looks like this: `const res = await fetch(full_url, { cache: 'default' });`. However, the request from 5176 fails and looks like: `const fetchPromise = fetch(theSameUrlWithDifferentQueryParameters);`. The server response for the working request includes `Access-Control-Allow-Origin: *`, but the failing request does not. I'm not whitelisting 5174. Any ideas on what's causing this discrepancy?
3 Answers
Have you tried allowing all origins on your server temporarily? That might help you narrow down whether it's a CORS issue specifically related to your request configurations.
It sounds like your issue might be related to the server's response to different types of requests. If the endpoint fails with a non-2xx/3xx status, it won't include the CORS header. Maybe check the response status from 5176.
This could be a preflight request issue. The request from 5174 probably doesn’t trigger a preflight check since it’s a 'simple' request, while the one from 5176 likely does due to custom headers or a different content type. If the server doesn’t handle the OPTIONS method properly, CORS headers won't be sent.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads