Skip to content

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

New issue
New issue
Closed
Closed
Can't remote develop create-react-app due to "Invalid Host Header"#2271
Labels
issue: bug
@formido

Description

@formido
formido
opened on May 19, 2017

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.

Activity

gaearon

gaearon commented on May 19, 2017

@gaearon
gaearon
on May 19, 2017
Contributor

Can you put your HOST into .env file?

HOST=mydevserver.com

Then restart the development server.

formido

formido commented on May 19, 2017

@formido
formido
on May 19, 2017
Author

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
gaearon

gaearon commented on May 19, 2017

@gaearon
gaearon
on May 19, 2017
Contributor

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

gaearon
added
issue: bug
on May 19, 2017
Timer

Timer commented on May 19, 2017

@Timer
Timer
on May 19, 2017 · edited by Timer
Contributor

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

Timer commented on May 19, 2017

@Timer
Timer
on May 19, 2017 · edited by Timer
Contributor

@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

formido commented on May 20, 2017

@formido
formido
on May 20, 2017 · edited by formido
Author

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

gaearon commented on May 20, 2017

@gaearon
gaearon
on May 20, 2017
Contributor

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

0xjjpa commented on May 20, 2017

@0xjjpa
0xjjpa
on May 20, 2017 · edited by 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
mentioned this on May 20, 2017
gaearon

gaearon commented on May 20, 2017

@gaearon
gaearon
on May 20, 2017
Contributor

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

gaearon

gaearon commented on May 20, 2017

@gaearon
gaearon
on May 20, 2017
Contributor

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.

gaearon
closed this as completedon May 20, 2017
formido

formido commented on May 20, 2017

@formido
formido
on May 20, 2017
Author

Awesome, great! 👍

rttomlinson

rttomlinson commented on May 22, 2017

@rttomlinson
rttomlinson
on May 22, 2017

@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

7 remaining items

lcoder

lcoder commented on Nov 23, 2017

@lcoder
lcoder
on Nov 23, 2017 · edited by 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

99sono commented on Dec 3, 2017

@99sono
99sono
on Dec 3, 2017

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.

colinjnash
mentioned this on Dec 12, 2017
rayzor65

rayzor65 commented on Jan 8, 2018

@rayzor65
rayzor65
on Jan 8, 2018

@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

willian commented on Jan 8, 2018

@willian
willian
on Jan 8, 2018

@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

formido commented on Jan 11, 2018

@formido
formido
on Jan 11, 2018 · edited by formido
Author

@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

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

@brian-lamb-software-engineer
brian-lamb-software-engineer
on Feb 27, 2018 · edited by 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

devssh commented on May 3, 2018

@devssh
devssh
on May 3, 2018 · edited by 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

flooyd commented on Jun 5, 2018

@flooyd
flooyd
on Jun 5, 2018

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

bugzpodder commented on Jun 5, 2018

@bugzpodder
bugzpodder
on Jun 5, 2018

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

dawnmist
mentioned this on Jun 21, 2018
xhalo32

xhalo32 commented on Jul 5, 2018

@xhalo32
xhalo32
on Jul 5, 2018

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

adamewhite

adamewhite commented on Jul 17, 2018

@adamewhite
adamewhite
on Jul 17, 2018

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.

jerrrrrrrrrrrrry
added a commit that references this issue on Jul 31, 2018

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

f45c6a2
lock
locked and limited conversation to collaborators on Jan 18, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue: bug

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @willian@formido@Timer@gaearon@0xjjpa

        Issue actions
          Can't remote develop create-react-app due to "Invalid Host Header" · Issue #2271 · facebook/create-react-app