DEV Community

loading...

CORS checklist

jfbrennan profile image Jordan Brennan ・2 min read

CORS always seems to require more work than I remember, so I made this checklist. Hope it helps!

Browser requirements

The following is required by the browser (not all clients restrict cross-origin resource sharing, only browsers):

  • fetch(url, {mode: 'cors', credentials: 'include'})
    • mode: 'cors' "allows cross-origin requests"
    • credentials: 'include' "send user credentials (cookies, basic http auth, etc..), even for cross-origin"
  • If using cookies for auth token storage, the cookie must have its domain attribute be the same domain as the API you're calling (e.g. cookie's domain is ".example.com" or exact match "api.example.com")

Server requirements

The following settings are required server-side:

  • Access-Control-Allow-Origin: * is not ideal. It prevents credentials (i.e. "Authorization" and "Cookie" headers) from being sent by the browser. It also means your API accepts requests from everything.
    • Access-Control-Allow-Origin: *.example.com is not supported and neither is a list of origins.
    • Only a single origin can be set, which means your web server has to programmatically figure out if the request is coming from a domain it should support (e.g. compare to a whitelist or regex matcher) and then set the header with that whole origin. (Note: an origin is <scheme>://<hostname> and possibly :<port> if your server exposes that). How to actually do this varies widely depending on your stack, but the result must be a complete origin, e.g. Access-Control-Allow-Origin: https://example.com.
  • Access-Control-Allow-Credentials: true indicates credentials can/should be included.
  • Access-Control-Allow-Methods: <method>[, <method>]* list of HTTP methods to allow. This is used to secure resources from unintended or malicious actions.

The above should get you a working solution. If not, MDN has a really good page on CORS here.

Discussion (4)

pic
Editor guide
Collapse
nitinkatageri profile image
Niitn Katageri

Nice checklist. Based on my experience I think server needs to take care of

Access-Control-Allow-Headers too.

Don't remember exactly if it was Chrome or FF which checked this.

Collapse
jfbrennan profile image
Jordan Brennan Author

If you have custom headers, yes. Left that out because I'm just covering the basic reqs.

Collapse
nitinkatageri profile image
Niitn Katageri

Oh! Let me go back and check that. Learnt something new. Thanks again.

Collapse
ben profile image
Ben Halpern

Nice list.