create-react-app: Can't remote develop create-react-app due to "Invalid Host Header"

At work I do all my development shelled into an AWS instance. This means my code and dev server are both remote, but my browser is local. When I try to access my react app, I get “Invalid Host Header”. I think this is due to the fix for webpack/webpack-dev-server#887. From googling around, it looks like I can fix this by ejecting, but that’s supposed to be for power users and the reason I’m trying create-react-app in the first place is I don’t understand anything about the ecoystem yet.

Is there anything I can do about this aside from ejecting? Is this worth fixing somehow?

Someone asked a question about this on Stack Overflow but didn’t get a response.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 8
Comments: 30 (9 by maintainers)

Commits related to this issue

This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). Below you will find some information on how to perform common tasks.<br> You can find the... — committed to jerrrrrrrrrrrrry/react-antd by jerrrrrrrrrrrrry 6 years ago

Most upvoted comments

Can you put your HOST into .env file?

HOST=mydevserver.com

Then restart the development server.

+39

gaearon on May 19, 2017

Please update to react-scripts@1.0.2.
It fixes this issue for users who don’t use the proxy feature.

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

+10

gaearon on May 20, 2017

Having the same issue, particularly when trying to work with c9.io

edit: Solved it by adding 0.0.0.0 <domain> in my /etc/hosts in addition to adding the domain to the .env file. Also, as a reference, we might want to inject the public option somewhere in case for whatever reason we want to serve the dev env to a public domain (thinking for example live coding).

0xjjpa on May 20, 2017

I use a VM to develop my app, so my machine maps the VM’s IP address to the domain I’m using, for this case my /etc/hosts is doing this:

192.168.50.10 dev.stabe.be

My API is on a remote server under SSL and uses the same domain: https://stabe.be/api/...

I tried configuring the proxy feature by adding "proxy": "https://stabe.be/api" to package.json, but I get a 404 error every time: screen shot 2017-08-03 at 10 53 31 am

If I try to the application using HTTPS=true and DANGEROUSLY_DISABLE_HOST_CHECK=true and call the API directly (without the proxy feature) I got this error instead: screen shot 2017-08-03 at 10 55 45 am

And if I don’t use the proxy and don’t run the application on development under HTTPS, the first load works fine but if I reload the application the browser redirects it to use only the https protocol, and this returns a 404 request.

This is my .env file:

DANGEROUSLY_DISABLE_HOST_CHECK=true
HOST=dev.stabe.be
HTTPS=true
PORT=3000

@gaearon do you have any suggestion here?

Thanks in advance!

willian on Aug 3, 2017

@gaearon It works after updating to 1.0.2. Thanks a bunch.

rttomlinson on May 22, 2017

I’ve tried everything that is written in the docs, and the only config that is working is DANGEROUSLY_DISABLE_HOST_CHECK 😞
Since I’ve already spent a few days trying to work this out for now I have to move on… When I’ll have some spare time I’ll try to dig deeper into why the error is happening and I’ll post here the results

dhmacs on Nov 20, 2017

This is the exact security flaw this change was meant to close. An outbound (non internal) IP should never be able to connect to a development server.

~~Changing the HOST isn’t what would make this work, we’d need to add an explicit allowedHosts option to package.json which listed his public IP.~~

Timer on May 20, 2017