Can't remote develop create-react-app due to "Invalid Host Header"
formido opened this issue · comments
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 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).
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.
@gaearon It works after updating to 1.0.2. Thanks a bunch.
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!
About my last message, I updated my app's host to http://dev:3000 and everything works fine now
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?
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 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 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 installAnd 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: bridgeThose files are in the root of my app file structure.
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 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.