"Invalid Host Header" in When running React App

Question

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.

score 37 · Answer 1 · edited Jan 26 '21 at 05:48

37

At your webpack config, you could add disableHostCheck: true at devServer configuration. For example,

devServer: {
  disableHostCheck: true
}

edited Jan 26 '21 at 05:48

alexandre-rousseau

2,321
26
33

answered Apr 27 '17 at 09:40

Kenrick

492
8
17

3

This is not recommended as it introduces security issues. See https://github.com/webpack/webpack-dev-server/issues/887 for an explanation. – mgol May 02 '17 at 09:17
2

what is the recommended solution then? the link doesn't seem resolved – mel3kings Jan 03 '18 at 10:51
3

This solution is acceptable for local environment. – alexandre-rousseau Jan 25 '21 at 17:43

score 3 · Answer 2 · answered May 16 '22 at 21:38

In more recent versions of Webpack (I use v4) the disableHostCheck is not available, but the documentation suggests using allowedHosts. It worked for me.

module.exports = {
  //...
  devServer: {
    allowedHosts: 'all',
  },
};

See Webpack's devServer.allowedHosts.

score 2 · Answer 3 · edited Jan 26 '21 at 05:31

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.

edited Jan 26 '21 at 05:31

alexandre-rousseau

2,321
26
33

answered Apr 28 '17 at 09:28

Gleb Eliseev

65
11

1

But why it is breaking with webpack version of 2.2.0?? – Bharat Sewani Apr 28 '17 at 13:25
Good question. My version from package.json was `^1.16.2`. Still broke it. – Gleb Eliseev Apr 29 '17 at 09:15
@BharatSewani it's put into a patch version due to the previous setup having security issues. See https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a & https://github.com/webpack/webpack-dev-server/issues/887. – mgol May 02 '17 at 09:18
@m_gol Thanks a lot for that! It actually reads _Maybe they read the release notes when it breaks._ – Gleb Eliseev May 02 '17 at 13:16
Thanks 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 – Bharat Sewani May 09 '17 at 11:22

score 2 · Answer 4 · edited Jun 25 '21 at 15:43

2

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

edited Jun 25 '21 at 15:43

Alexander van Trijffel

2,916
1
29
31

answered Feb 05 '21 at 12:55

AAber

1,562
10
14

When 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.... – johndpope Sep 14 '21 at 04:54

johndpope · Answer 5 · 2021-10-27T22:38:02.893

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

score 0 · Answer 6 · answered May 03 '17 at 02:09

0

change the host to 127.0.0.1 in build script.

"build": "SET NODE_ENV=production && webpack-dev-server --host 127.0.0.1 --inline --history-api-fallback --content-base . "

answered May 03 '17 at 02:09

young

1
1

"Invalid Host Header" in When running React App

6 Answers6

Linked