0

I'm using a create-react-app-generated server for my front-end (under the hood it uses Webpack's dev server), and I'm using Node/Express for back-end. Whenever I have this combination, I always run into XSS issues (eg. between localhost:3000 and localhost:4000) because the two servers have to run on different ports.

Given that my production site will be serving everything from the same domain, I don't really need CORS or anything fancy. Is there any sort of easy/hack way to avoid cross-domain issues in such a local dev environment?

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • You can set the response header "Access-Control-Allow-Origin" to "*" in the express server. This [post](https://stackoverflow.com/questions/23751914/how-can-i-set-response-header-on-express-js-assets) might help – Nithin Thampi Sep 22 '19 at 07:18
  • In dev it's possible to setup Express as a reverse proxy for webpac-dev-server so that your React app doesn't know that script bundles are fetched from webpack-dev-server nor does it know webpack-dev-server exists. Therefore you have no CORS issues because everything comes from one source: Express. Similar arrangement for production, the only difference is that Express should serve webpack build artifacts (bundles etc.) from disk and not from webpack-dev-server because the latter is not really meant to be used in production. If you are ok with Typescript I can provide an example. – winwiz1 Sep 22 '19 at 08:51
  • 1
    Those are both great answers (though @nithin's suggestion sounds easiest). But I can't upvote and/or accept either one in the form of a comment, so please provide those as answers :) – machineghost Sep 22 '19 at 19:04

1 Answers1

1

You can set the response header "Access-Control-Allow-Origin" to "*" in the express server. This post might help.

Nithin Thampi
  • 3,579
  • 1
  • 13
  • 13