My problem is quite simple: I would like to avoid using localhost at the end of my HOST env variable with create-react-app. However it seems that if the URL doesn't end with .localhost, the script will try to resolve the URL against a DNS server.
I would like to avoid that and just use the same URL domain as my backend server is using, to avoid CORS problems (and I wish not to configure my backend to allow CORS because that's not how the production infrastructure is).
Thanks :)
If you want to use some custom domain locally, without resolving it agains a DNS server, you can add that domain to your hosts file.
Location of hosts file on Windows:
C:\Windows\System32\drivers\etc\hosts
Location of hosts file on Mac:
/etc/hosts
You can modify the hosts file by adding the following line to it:
127.0.0.1 yourcustomdomain.com
This will bind yourcustomdomain.com to your local IP. Now you can use yourcustomdomain.com in your create-react-app.
hosts file, you will find a comment saying # localhost name resolution is handled within DNS itself.. localhost is mapped to the local IP by default.The true problem you're facing here is CORS. The standard solution for this is actually to just proxy your request, so that they're hitting from the same origin. Webpack has a clean way to do this. See this blog by facebook: https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development
This has gotten incredibly easy to do now. All you need to do is add a proxy field to your package.json. For example -
"proxy": "http://localhost:4000",
