DEV Community

Cover image for Dealing with CORS

Dealing with CORS

Ste Griffiths on January 27, 2020

If you're a web developer, CORS is probably a recurring phantom that comes back every other project to steal a whole week. After my most recent wre...
Collapse
 
patryktech profile image
Patryk

My strategy is this:

  • Use Docker-compose
  • Use an nginx container
  • Route calls to /api/ to my back-end (Python container running Django, typically)
  • Serve static assets and my built front-end from nginx

Setting up docker may take a while the first time, but once you learn it, you never have to worry about CORS, Cookie origin, etc.

Collapse
 
stegriff profile image
Ste Griffiths

I guess the trick here is that both your backend and frontend are at the same origin because of docker, so you don't have the problem. But when you go into production, the landscape might be different, e.g. if the backend one day is run from a different remote host.

Thanks for the insights :)

Collapse
 
patryktech profile image
Patryk • Edited

I generally run them on a single host, as I run smaller sites, but even if you run them on multiple hosts, as long you run nginx (or HAProxy, or something else - I only have experience with nginx), it doesn't really matter.

In your nginx config:

location /api/ {
  # https://example.com/api/
  proxy_pass http://backend.example.com;
}

location / {
  # https://example.com - everything except for /api/
  proxy_pass http://frontend.example.com;
}

Of course, this is a simple example that might break TLS, if you're proxying requests over the internet, and you probably want to pass more options (e.g. forwarding the HOST header to django), and this may add some latency, so ideally you'd want all servers running in the same data center.

I'll see if I find the time to write a more detailed post about this one of these days.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

I don't really understand. Does this solve the problem with Webpack Dev Server or Gatsby?

Collapse
 
patryktech profile image
Patryk

I've never used Gatsby, and the webpack work I do is usually with vue.js, but if your webpack dev server is communicating with an API, yes.

I run similar containers (Django for back-end, vue.js for front-end) on my dev machine as in production.

The difference is I serve a built SPA from nginx in production, and run the nodejs server in dev - but then I still have an nginx container for routing.

I point my base URL to /api/ (or often to /graphql/), then it doesn't matter whether I access my dev site through localhost, or dev.example.com, or if I access staging.example.com, or just example.com in production... It Just Works™.

Collapse
 
jrsofty profile image
Jason Reed

One point is if the TLS certificate doesn't match the actual server domain. That is a problem with dev.to's api. There is a mismatch and browsers will block it. I had to resort to a work around to access dev.to api. dev.to/jrsofty/cors-problem-workar...

Collapse
 
mightytechno profile image
Mighty

This is good.Thanks

Collapse
 
stegriff profile image
Ste Griffiths

Thank you for reading!

Collapse
 
kimsean profile image
thedevkim

This is really helpful. Thank you

Collapse
 
stegriff profile image
Ste Griffiths

I'm glad! Thanks for the feedback :)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

I once setup a lambda in aws to make requests client side which would then request another resource. Sort of overkill but still cool to try out.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

How do I solve CORS when using Webpack dev server?

A solution is probably with expressjs's cors to allow all when process.env.NODE_ENV === 'development'.

Collapse
 
stegriff profile image
Ste Griffiths

I suppose it's up to you in your Express backend to make sure that the right headers are sent back as described, and that your backend responds to OPTIONS requests if necessary. Express seems to have its own CORS guide here: expressjs.com/en/resources/middlew...

Hope this helps :)

Collapse
 
tbetous profile image
Thomas Betous

Great article ! Thanks !