Saleor: GraphQL Fails Preflight (OPTIONS) Check
What I'm trying to achieve
I'm trying to use the graphql endpoint from a React SPA. Both the Saleor server and the React app are running on localhost. The Saleor ALLOWED_HOSTS is the default (localhost,127.0.0.1). However, the browser preflight check fails. The OPTIONS request returns a 405 error.
Steps to reproduce the problem
- Send an OPTIONS request to Saleor's graphql endpoint
What I expected to happen
I expected an OK status so that the browser would then proceed to send my actual GET/POST requests.
System information
Operating system: Windows 10
Browser: Firefox 62.0.2
khalibloo
All 2 comments
Thanks for reporting. We have a fix for that on another branch (checkout-2.0). I'll isolate them into a separate branch and open a PR to master.
maarcingebala
on 25 Sep 2018
Hi, unfortunately, basing the cors headers on the ALLOWED_HOSTS leads to some further difficulties. ALLOWED_HOSTS is just a list of host names such as localhost and google.com. Cors headers on the other hand don't seem to work unless the protocol _--and for localhost, even port number--_ are included (like so http://localhost:3000). Furthermore, the cors header does not work if multiple origins are returned https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin Only the origin making the request should be returned.
Due to the strictness of the cors header format, I've found it often useful to use regex to specify the allowed origins. django-cors-headers has a CORS_ORIGIN_REGEX_WHITELIST setting that is extremely useful for such. I think exposing a setting such as that for saleor would work best. In a local clone of saleor, I even tried adding django-cors-headers with a regex whitelist. It worked wonders.
Edit:
I'm using django-cors-headers in the meantime, so this issue can be closed. But I'd like to see saleor have a working solution out-of-the-box without any third party libraries. Or perhaps a compromise where the hosts in ALLOWED_HOSTS are wrapped in a regex check that handles all protocols and ports.
khalibloo
on 25 Sep 2018
Related issues
ghost
路
4Comments
Pacu2
路
4Comments
jujes
路
4Comments
ranjanprj
路
3Comments
NumanIjaz
路
3Comments
Most helpful comment
Hi, unfortunately, basing the cors headers on the
ALLOWED_HOSTSleads to some further difficulties.ALLOWED_HOSTSis just a list of host names such aslocalhostandgoogle.com. Cors headers on the other hand don't seem to work unless the protocol _--and for localhost, even port number--_ are included (like sohttp://localhost:3000). Furthermore, the cors header does not work if multiple origins are returned https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSAllowOriginNotMatchingOrigin Only the origin making the request should be returned.Due to the strictness of the cors header format, I've found it often useful to use regex to specify the allowed origins.
django-cors-headershas aCORS_ORIGIN_REGEX_WHITELISTsetting that is extremely useful for such. I think exposing a setting such as that for saleor would work best. In a local clone of saleor, I even tried addingdjango-cors-headerswith a regex whitelist. It worked wonders.Edit:
I'm using
django-cors-headersin the meantime, so this issue can be closed. But I'd like to see saleor have a working solution out-of-the-box without any third party libraries. Or perhaps a compromise where the hosts inALLOWED_HOSTSare wrapped in a regex check that handles all protocols and ports.