"Invalid Host Header" in When running React App
Solution 1
At your webpack config, you could add disableHostCheck: true
at devServer
configuration. For example,
devServer: {
disableHostCheck: true
}
Solution 2
Just to explain why this is happening.
webpack-dev-server has released v2.4.3.
Quoting their patch note:
The Host header of the request have to match the listening adress or the host provided in the public option. Make sure to provide correct values here.
They have also included disableHostCheck
to turn this check off, BUT
Only use it when you know what you do. Not recommended.
Solution 3
Configuring the react target host will fix the "Invalid Host Header" error
Find the FQDN of your react server, for example if your server's FQDN is: my.devserver.com
Add the following line to your .env file:
HOST=my.devserver.com
Restart the react app and access it at http://my.devserver.com:3000/
If my.devserver.com needs to be accessible from other machines, add this line to your hosts file (/etc/hosts on Unix based systems):
0.0.0.0 my.devserver.com
Solution 4
If you're seeing this in combination with nginx proxy + ssl / and docker I needed to specify the HOST but also bespoke proxy var
https://github.com/plaid/quickstart/blob/master/frontend/src/setupProxy.js
I basically needed to tell react both the HOST + environment:
- REACT_APP_API_HOST=www.yourdomainhere.com
- HOST=frontend
services:
go:
networks:
- "quickstart"
depends_on:
- "frontend"
image: "100418366104"
ports: ["8000:8000"]
frontend:
environment:
- REACT_APP_API_HOST=www.yourdomainhere.com # see above setupProxy.js file
- HOST=frontend
networks:
- "quickstart"
image: "e478fc0620e6"
ports: ["3000:3000"]
nginx:
networks:
- "quickstart"
build:
dockerfile: ./nginx/Dockerfile
context: .
ports:
- 80:80
- 443:443
depends_on:
- frontend
networks:
quickstart:
name: quickstart
Related videos on Youtube
Bharat Sewani
Updated on October 28, 2021Comments
-
Bharat Sewani over 2 years
I am having one simple project of React JS and I am deploying into OSE. Also I am using below dependencies in my project.
"webpack": "^2.2.0", "webpack-dev-server": "^1.14.1", "react": "^15.5.4", "react-router-dom": "^4.1.1"
also I am running my project through below build script.
"build": "SET NODE_ENV=production && webpack-dev-server --host 0.0.0.0 --inline --history-api-fallback --content-base . "
Everything goes fine in OSE and Webpack is compiled successfully. But on accessing the url it shows "Invalid Host Header" on the webpage.
Could anyone help on this. Somewhat New in React.
Thanks in Advance.
-
Bharat Sewani about 7 yearsBut why it is breaking with webpack version of 2.2.0??
-
Gleb Eliseev about 7 yearsGood question. My version from package.json was
^1.16.2
. Still broke it. -
mgol about 7 yearsThis is not recommended as it introduces security issues. See github.com/webpack/webpack-dev-server/issues/887 for an explanation.
-
mgol about 7 years@BharatSewani it's put into a patch version due to the previous setup having security issues. See medium.com/webpack/… & github.com/webpack/webpack-dev-server/issues/887.
-
Gleb Eliseev about 7 years@m_gol Thanks a lot for that! It actually reads Maybe they read the release notes when it breaks.
-
Bharat Sewani almost 7 yearsThanks for the info :) I read the article so instead of doing disable host check : true we should pass 'public:www.xyz.com' in our npm start script? "build": "SET NODE_ENV=production && webpack-dev-server --host 0.0.0.0 --inline --history-api-fallback --public xyz.com --content-base . " where xyz.com is our server ip. Correct me if I am wrong @m_gol
-
mel3kings over 6 yearswhat is the recommended solution then? the link doesn't seem resolved
-
alexandre-rousseau over 3 yearsThis solution is acceptable for local environment.
-
johndpope over 2 yearsWhen I use nginx + ssl locally - this solution doesn't work. I'm using nginx as transparent proxy - and ...oh wait (maybe I need to change host file on my nginx container...) ... confusing....