4

I've been developing a new site using Angular for the frontend and PHP's Slim framework for the API. I've been developing in Chrome (and with Postman) and have had no issues. I tested in Firefox today, and all API responses fail with the error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://api.opweekends.local/users/authenticate. (Reason: missing token ‘content-type’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).

I have Access-Control-Allow-Headers set to * (and verified in the console), so I can't figure out why it's working in Chrome and not Firefox, and why this error is coming up. Shouldn't * cover all headers?

Rohit
  • 3,018
  • 2
  • 29
  • 58
  • 3
    Firefox doesn’t yet recognize the `*` wildcard value for Access-Control-Allow-Headers. So instead of the wildcard, the value needs to explicitly list all the header names to allow: 'Access-Control-Allow-Headers: content-type'. See related Firefox bug at https://bugzilla.mozilla.org/show_bug.cgi?id=1309358 – sideshowbarker Oct 11 '18 at 00:51
  • Damn, I imagine that list is long... – Rohit Oct 11 '18 at 01:01
  • 2
    The list only must contain the header names you actually need to access from your frontend code. But one way you could do it without needing to hardcode all the header names in your server-side code is: Make your server-side code take the value of the Access-Control-Request-Headers request header the browser sends, & just echo that into the value of the Access-Control-Allow-Headers response header. Or else use some existing library to CORS-enable your server. Echoing the Access-Control-Request-Headers value into Access-Control-Allow-Headers is something those library will typically do for you. – sideshowbarker Oct 11 '18 at 01:12

0 Answers0