Invalid Host header when running Create React App on localhost subdomain

Question

After updating to the react-scripts 1.0.0 I get this error when I try to open my app in the browser on a localhost subdomain: 'Invalid Host header'

My app was set up to serve different data for different subdomains: group1.localhost:3000 group2.localhost:3000 ...

I found that adding the code below to my webpack config should fix the problem.

devServer: {
  disableHostCheck: true
}

But how can i fix it in CRA without ejecting?

Solution 1

Please update to [email protected].
It fixes this issue for users who don't use the proxy feature in React.

If you do use the proxy feature, please follow these instructions.

Solution 2

An easy solution for development environment would be to set the following environment variable: DANGEROUSLY_DISABLE_HOST_CHECK=true

That can be done by e.g. adding that line to .env file in the root of the project. Note that this is not a secure solution and should not be used in production.

Solution 3

Solved it by adding 0.0.0.0 <domain> in my /etc/hosts in addition to adding the domain to the .env file.

Comments

[conor909]

it says add HOST=mypublicdevhost.com where do I find / what is my "mypublicdevhost" ?

[adnauseam]

Thanks! This was my scenario as well. I had a HOST=local.companydomain.com in an .env as well, but needed to add 0.0.0.0 local.companydomain.com in my /etc/hosts. Reference to 0.0.0.0

[Milind]

add it in the .env.development file at the root folder

[S1534]

How sketchy would it be to use this in a production env?

[John Stuart]

what should use in production ?

[Samuli Asmala]

The question and this answer applies to start script which starts a development server. In production you should run build script to build a production bundle. This static bundle is then served to users using a web server, e.g. Nginx or Apache. It's also possible to use Node.JS for that, e.g. Express package.

[superjos]

just to mention that, as of today, that "instructions" link is not working anymore. Not sure whether it should point to create-react-app.dev/docs/proxying-api-requests-in-developme‌​nt/…