How to resolve invalid host header issue in webpack?

问题

I'm getting invalid host header error, if i access my page through browser with online ip. Locally it is working perfectly, but i don't know why this error is coming in live server. I'm following three steps to run my react js application, that is, 'npm install' 'npm run build' 'npm run serve'

webpack config file host setup

// replace localhost with 0.0.0.0 if you want to access // your app from wifi or a virtual machine

const host = process.env.HOST || '0.0.0.0';
const port = process.env.PORT || 3000;

const stats = {
  hash: false,
  version: false,
  timings: false,
  assets: false,
  chunks: false,
  modules: false,
  reasons: false,
  children: false,
  source: false,
  errors: false,
  errorDetails: false,
  warnings: false,
  publicPath: false,
  colors: {
    green: '\u001b[32m',
  },
};

package.json scripts

"build": "rimraf build && cross-env NODE_ENV=production webpack --env.prod=true --env.sw=true",
    "serve": "pushstate-server build/ 3000",

回答1:

Webpack dev server has recently had a host check added by default as a security measure https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3

You will now need to either disable it via disableHostCheck option (not wise if publicly accessible) or specify the public host or IP that you will be accessing it at when starting the server --public your-hostname-or-public-ip:3000

EDIT: Webpack in question name and webpack-dev-server tag was misleading - this actually uses different server altogether...

Ah it looks like this is not actually webpack related at all - you are using a different server pushstate-server which strangely has the host option in the module, but is not exposed in the binary. You will have to roll your own server startup script to pass a different host to it (it is 0.0.0.0 by default).

Save this to ./server.sh

#!/usr/bin/env node

require('pushstate-server').start({
  directory: process.argv[2],
  port: process.argv[3],
  file: process.argv[4],
  host: process.argv[5]
}, (err, address) =>
  console.log(`Listening on port ${address.port} (http://${address.address}:${address.port})`)
)`

Change your npm script change to

server.sh build/ 3000 index.html your-publicly-accessible-hostname