CODEWITHSUNDEEP
reactjsdeploymentwebpackreact-routerwebpack-dev-server
Bharat Sewani
Bharat Sewani

Reputation: 668

"Invalid Host Header" in When running React App

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.

Upvotes: 32

Views: 74337

Answers (7)

fabio.meyer
fabio.meyer

Reputation: 49

I have fixed that by including the domain in the allowedHosts but also in the hostname client property of webpack.config.ts

devServer: {
    allowedHosts: [
        'example.com'
    ],
    client: {
        webSocketURL: {
        hostname: 'example.com', <-- this one triggers 'invalid host header' on my case
        port: 443, // Port HTTPS
        protocol: 'wss',
        },
    }

Upvotes: 0

nyxz
nyxz

Reputation: 7418

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.

Upvotes: 8

johndpope
johndpope

Reputation: 5249

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

Upvotes: 1

AAber
AAber

Reputation: 1749

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

Upvotes: 2

Kenrick
Kenrick

Reputation: 500

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

devServer: {
  disableHostCheck: true
}

Upvotes: 37

Gleb Eliseev
Gleb Eliseev

Reputation: 65

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.

Upvotes: 2

young
young

Reputation: 1

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

Upvotes: 0

Related Questions