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

[formido]

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.

[gaearon]

Can you put your HOST into .env file?

HOST=mydevserver.com

Then restart the development server.

[formido]

That gives:

npm start
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
^[[?25hnpm info lifecycle [email protected]~prestart: [email protected]
^[[?25hnpm info lifecycle [email protected]~start: [email protected]

> [email protected] start /home/node/src
> node scripts/start.js

Could not find an open port at ec2-54-91-117-181.compute-1.amazonaws.com.
Network error message: listen EADDRNOTAVAIL 10.169.55.152


npm info lifecycle [email protected]~start: Failed to exec start script
npm ERR! Linux 4.4.0-53-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.9.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'node scripts/start.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the src package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node scripts/start.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs src
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls src
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /root/.npm/_logs/2017-05-19T21_47_48_878Z-debug.log

[gaearon]

Hmm this means our port detection code couldn't connect to this host. Does the same exact host work with 0.9.x?

[Timer]

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]

@formido as a temporary work around, you should be able to get your machine's public IP address and set it as the HOST on the amazon server; but you'll also need to set a firewall rule (on the ec2 instance) which lets you bind to that address:

iptables -t nat -A OUTPUT -p all -d 123.456.789.012 -j DNAT --to-destination 127.0.0.1

edit: don't mind me, idk where my head was -- I forgot you'd be visiting with the machine's url

[formido]

Ok, adding HOST to the .env file worked. The previous error happened because I had forgotten I was running the app in docker.

In principle, there's no reason why a development server should not be accessible from an external IP. It depends on the details, e.g., limit access with an AWS security group. For me, it's extremely convenient.

[gaearon]

We'll err on the side of safety but it would be nice if we could serve a more useful page explaining the reason for this limitation and workarounds.

[0xjjpa]

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).

[gaearon]

I have a proposed solution here: #2288.
What do you think?

[gaearon]

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

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

[formido]

Awesome, great! 👍

[rttomlinson]

@jjperezaguinaga Do you have a small write-up on how to configure c9 and create-react-app to get the dev server to work? My apologies if this isn't the right place to post. Thanks

[gaearon]

It should already work on c9 with [email protected] and higher.

[rttomlinson]

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

[willian]

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:

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:

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]

About my last message, I updated my app's host to http://dev:3000 and everything works fine now

[dhmacs]

I'm not able to make ngrok TLS tunnel working with this setup:

• proxy enabled for backend API
• HTTPS=true

I get the Invalid Host header error.

When I try to add the HOST variable set to the ngrok address, it fails to start the dev server throwing this error message:

Could not find an open port at 89wdbe7.ngrok.io.
Network error message: listen EADDRNOTAVAIL 52.15.32.43

@gaearon is DANGEROUSLY_DISABLE_HOST_CHECK=true the only way to make this work?

[Timer]

You may be able to set HOST=89wdbe7.ngrok.io. If this doesn't work (you said it doesn't), you can look into why and help us fix it! You could try hard setting a PORT, not sure if this skips the check.

Otherwise, yes. DANGEROUSLY_DISABLE_HOST_CHECK is the only way to make this work.

[dhmacs]

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

[lcoder]

I have created my project a long time ago.I configure package.josn:
"start": "HOST=rc.baidu.com node scripts/start.js", . And it doesn't work.

{
    "webpack": "1.14.0",
    "webpack-dev-server": "1.16.2",
    "webpack-manifest-plugin": "1.1.0"
}

[99sono]

NOTE:
This issue is related to discussion:
angular/angular-cli#6070

On the above link the discussion is clearer and more profound.
As a last resort fix, you can analyse and modify the code line:

QUOTE
Until this gets resolved you can just change the following line in node_modules/webpack-dev-server/lib/Server.js (line 402):

if(this.disableHostCheck) return true;

---

An additional point is that the message returned by the node js server:
"Invalid Host header"

Is not very useful unless you are running wiresehark.
At minimum, one wants to return to the user something like:
hostname being rejeted is: docker.for.mac.localhost

And this validation is indeed a pain in the ... Considering micro-service-like applications, where to avoid cross origin problems, one connects an apache httpd server that routes to backend services, hostname re-writing is only to be expected. IN the case of docker development, having something like the above hostname that allows to connect to the host os is quite needed.

[rayzor65]

@formido you mentioned you ran into an error due to running the app in docker, I believe this is currently happening to me, may I ask what was the issue/solution?

[willian]

@rayzor65 I'm running an app bootstrapped with CRA on docker using docker-compose.
What is the problem you're having?

Here is my Dockerfile:

FROM node:alpine

RUN apk --no-cache update \
  && apk --no-cache upgrade \
  && apk --no-cache add paxctl

RUN paxctl -cm $(which node)

RUN mkdir /app
WORKDIR /app

ADD . /app

RUN yarn install

And my docker-compose.yml:

version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    command: yarn start
    tty: true
    dns:
      - 8.8.8.8
      - 8.8.4.4
    volumes:
      - .:/app
    ports:
      - "3000:3000"
      - "8080:8080"
    networks:
      - public
    env_file:
      - .env
networks:
  public:
    driver: bridge

Those files are in the root of my app file structure.

[formido]

@rayzor65 IIRC, I was putting the AWS host in the .env but it needed to be the docker host.

Sorry for the late response, I guess listening on all the notifications on this project can make @s get lost in the noise.

[brian-lamb-software-engineer]

Not sure how this is relates, but I got this same error when specifying host: '0.0.0.0', (not on create-react-app but on another react app) changing to the actual hostname fixed it for me. This goes in your webpack config for e.g. hostname of yourhostname.pvt

module.exports = {
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    stats: 'errors-only',
    port: 3001,
    host: 'yourhostname.pvt',
  },
  //...
  //...
};

[devssh]

Fixing the host header in the .env file led to a no-referrer-when-downgrade and slightly different CSS.

Finally after ejecting I had to rewrite my own webpack config to get rid of these security policies for development and modify my server to get rid of cors.

[flooyd]

I am on c9, using react-scripts 1.1.4. I have tried everything suggested here, yet I still get Invalid Host Header. Anyone else having this issue still?

[bugzpodder]

@flooyd please open a new issue and tell us what didn't work and what error you saw (fill in the issue template). Thank you!

[xhalo32]

I had the same problem, but my local /etc/hosts was to blame 🤦‍♂️.

[adamewhite]

Was this ever solved conclusively? I'm still having the same problem after including an .env file with the HOST variable. I'm not sure what else to do.