DEV Community

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...

Read full post

Patryk • Jan 27 '20

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.

Ste Griffiths • Jan 28 '20

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 :)

Patryk • Jan 28 '20 • 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.

Pacharapol Withayasakpunt • Jan 28 '20

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

Patryk • Jan 28 '20

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™.

Jason Reed • Jan 27 '20

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...

thedevkim • Jan 27 '20

This is really helpful. Thank you

Ste Griffiths • Jan 27 '20

I'm glad! Thanks for the feedback :)

Mighty • Jan 27 '20

This is good.Thanks

Ste Griffiths • Jan 27 '20

Thank you for reading!

Adam Crockett 🌀 • Jan 27 '20

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.

Pacharapol Withayasakpunt • Jan 28 '20

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'.

Ste Griffiths • Jan 28 '20

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 :)

Thomas Betous • Jan 28 '20

Great article ! Thanks !