so annoyed rn im building a Vue app on a static host and trying to fetch data from a form-handling service. Postman returns the data perfectly. The browser gives me this:
The console says teh request has been blocekd by CORS policy, no Access-Control-Allow-Origin header is present... i don't understand why teh same request works in one tool and not the other. Is this something i fix in my code or on teh API side? A plain explanation would honestly help as much as the fix itself.
Requests with Authorization headers or Content-Type: application/json trigger a prelfight OPTIONS request. the server must respond to it with a 2xx status plus Access-Control-Allow-Methods and Access-Control-Allow-Headers listing what u send. many servers return 404 or 401 to OPTIONS, which fails the whole thing.
CORS is enforced by teh browser, not teh server, which is why Postman and curl work. The fix is always on the server: it must answer with Access-Control-Allow-Origin matching ur sites origin. adding headers to ur fetch call cant fix it, and mode: 'no-cors' just gives you an unreadable opaque response. lmk how it goes
yeahhh for ur own Express backend, use the cors middleware before ur routes: app.use(cors({ origin: 'https://your-site.example', credentials: true })). make suree error responses (401, 500) also go through it; otherwise a real server error shows up in the browser as a misleading CORS error.
@cthorne Moved teh a form-handling service call to a small serverless function sooo teh secret key stays private. No CORS problem and a security hole closed, thx!
Sign in or create an account to reply.
