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...
For further actions, you may consider blocking this person and/or reporting abuse
My strategy is this:
/api/
to my back-end (Python container running Django, typically)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.
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 :)
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:
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.
I don't really understand. Does this solve the problem with Webpack Dev Server or Gatsby?
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™.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...
This is good.Thanks
Thank you for reading!
This is really helpful. Thank you
I'm glad! Thanks for the feedback :)
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.
How do I solve CORS when using Webpack dev server?
A solution is probably with
expressjs
'scors
to allow all whenprocess.env.NODE_ENV === 'development'
.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 :)
Great article ! Thanks !