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.

Can you put your HOST into .env file?

HOST=mydevserver.com

Then restart the development server.

That gives:

npm start
npm info it worked if it ends with ok
npm info using npm@4.2.0
npm info using node@v7.9.0
^[[?25hnpm info lifecycle src@0.1.0~prestart: src@0.1.0
^[[?25hnpm info lifecycle src@0.1.0~start: src@0.1.0

> src@0.1.0 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 src@0.1.0~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! src@0.1.0 start: `node scripts/start.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the src@0.1.0 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

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

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

@formido

@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

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.

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.

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

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

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.

Awesome, great! 👍

@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

It should already work on c9 with react-scripts@1.0.2 and higher.

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.

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

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"
}

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.

@formido

@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?

@rayzor65

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

@rayzor65

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

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',
  },
  //...
  //...
};

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.

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?

@flooyd

@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!

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

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.

This project was bootstrapped with [Create React App](https://github.…

Navigation Menu

Repository navigation

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

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

gaearon commented on May 19, 2017

formido commented on May 19, 2017

gaearon commented on May 19, 2017

Timer commented on May 19, 2017

Timer commented on May 19, 2017

formido commented on May 20, 2017

gaearon commented on May 20, 2017

0xjjpa commented on May 20, 2017

gaearon commented on May 20, 2017

gaearon commented on May 20, 2017

formido commented on May 20, 2017

rttomlinson commented on May 22, 2017

gaearon commented on May 22, 2017

4 remaining items

Timer commented on Nov 20, 2017

dhmacs commented on Nov 20, 2017

lcoder commented on Nov 23, 2017

99sono commented on Dec 3, 2017

rayzor65 commented on Jan 8, 2018

willian commented on Jan 8, 2018

formido commented on Jan 11, 2018

brian-lamb-software-engineer commented on Feb 27, 2018

devssh commented on May 3, 2018

flooyd commented on Jun 5, 2018

bugzpodder commented on Jun 5, 2018

xhalo32 commented on Jul 5, 2018

adamewhite commented on Jul 17, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions