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?

For multiple subdomains please track this issue: https://github.com/facebookincubator/create-react-app/issues/2233. — Dan Abramov, May 19 '17 at 21:45
Even with the initial solution you had (```devServer: { disableHostCheck: true }```) I still couldn't fix this problem. Any idea what's wrong? — S1534, Jan 09 '21 at 23:18

score 20 · Answer 1 · answered Feb 16 '20 at 16:54

20

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.

answered Feb 16 '20 at 16:54

Samuli Asmala

1,755
18
24

How sketchy would it be to use this in a production env? – S1534 Jan 09 '21 at 23:41
what should use in production ? – John Stuart Jul 12 '21 at 07:30
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. – Samuli Asmala Jul 13 '21 at 20:33

score 7 · Accepted Answer · edited Jun 30 '17 at 15:06

7

Please update to react-scripts@1.0.2.
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.

edited Jun 30 '17 at 15:06

Alireza

100,211
27
269
172

answered May 20 '17 at 18:24

Dan Abramov

264,556
84
409
511

it says add `HOST=mypublicdevhost.com` where do I find / what is my "mypublicdevhost" ? – conor909 Oct 04 '18 at 21:04
1

add it in the .env.development file at the root folder – Milind Sep 02 '19 at 13:10
2

just to mention that, as of today, that "instructions" link is not working anymore. Not sure whether it should point to https://create-react-app.dev/docs/proxying-api-requests-in-development/#invalid-host-header-errors-after-configuring-proxy – superjos Dec 07 '21 at 11:35

score 4 · Answer 3 · answered Oct 01 '18 at 16:58

4

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

answered Oct 01 '18 at 16:58

Himanshu Teotia

2,126
1
27
38

1

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](https://en.wikipedia.org/wiki/0.0.0.0) – adnauseam Jun 16 '19 at 17:05

score 0 · Answer 4 · answered May 16 '20 at 17:55

Add the HOST in your .env file, then create react app will your host, rather than localhost. If it doesn't fix the issue then add DANGEROUSLY_DISABLE_HOST_CHECK=true in the .env file.

Don't forget to restart the development server.

HOST=mydevserver.com

score 0 · Answer 5 · answered Jun 12 '23 at 14:27

0

running a basic yarn command fixed things for me

answered Jun 12 '23 at 14:27

Philip Sopher

627
2
8
19

Invalid Host header when running Create React App on localhost subdomain

5 Answers5

Linked