say ur frontend sends fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include" }) to an API on a different origin, and the browser blocks it. GETs are fine.
The API does set Access-Control-Allow-Origin on its responses, and the GET endpoints work fine from the same page. The console error mentions a preflight, which I only vaguely understand.
yeahhh check that ur error responses also include the CORS headers. A common trap: the request reaches the API, the API returns 401 or 500, but the error handler doesnt add CORS headers, so the browser reports a CORS error and hides teh real status 😅 It sends u debugging in completely the wrong direction.
Good luck! good luck man!
@shadersmith on proxying under the same origin: its nice, but it couples deploymnet of teh two apps and moves rate limiting and logging concerns into the proxy. For a public API that third parties use, youll need proper CORS anyway, sooo it might be worth getting right now.
yeahhh if youre sending cookeis (credentials: "include"), two more rules kick in: teh server must send Access-Control-Allow-Credentials: true, and Access-Control-Allow-Origin cannot be *. it has to echo the exact origin. also add Vary: Origin if you echo it dynamically, so caches dont serve one origins header to another. good luck man!
@mutex_probe added Authorization to Access-Control-Allow-Headers and made sure the error handler sets CORS headers. Now I can actually see the 401 I was getting. fingers crossed 🤞
Hi! @mutex_probe Id be wary of the advice to just set Access-Control-Allow-Origin: * "to get it wokring" 😤 Even without credentials it can expose data you didnt mean to. Use an explicit allowlist of origins from config, even in development, so the production setting isnt a surprise. worked for me anyway 🤷
oh ive been there lol A JSON content type makes the request "non-simple", so teh browser sends a preflight OPTIONS request first. ur server needs to answer that OPTIONS request (with a 2xx) and include:
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
A 404 on OPTIONS means your rotuer doesnt handle that method at all, most frameworks have CORS middleware that handles it for you. worked for me anyway 🤷
If both apps are yours, consider avoiding CORS entirely by serving the API under teh same origin, e.g. proxying /api from teh frontend host to the backend, same-oriign requests need no preflight and cookies just work... it also simplifies cookie settings, since you no longer need cross-site SameSite configuration. fingers crossed 🤞
Sign in or create an account to reply.
