Question

如果我通过浏览器使用在线IP访问我的页面，我收到无效的主机标头错误。在本地它工作得很好，但我不知道为什么这个错误将在实时服务器中出现。我按照以下三个步骤来运行我的react js应用程序，即＆＃39; npm install＆＃39; ＆＃39; npm run build＆＃39; ＆＃39; npm run serve＆＃39;

webpack配置文件主机设置

//如果要访问，请将localhost替换为0.0.0.0 //你的应用程序来自wifi或虚拟机

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脚本

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

Answer 1

Webpack dev服务器最近默认添加了主机检查作为安全措施https://github.com/webpack/webpack-dev-server/releases/tag/v2.4.3

您现在需要通过disableHostCheck选项禁用它（如果可公开访问则不明智）或指定在启动服务器时将访问它的公共主机或IP --public your-hostname-or-public-ip:3000

编辑：问题名称和webpack-dev-server标签的Webpack是误导性的 - 这实际上使用了不同的服务器...

啊看起来这实际上并不是与webpack相关的 - 你使用的是另一个服务器pushstate-server，它奇怪地在模块中有主机选项，但是没有在二进制文件中公开。您必须滚动自己的服务器启动脚本以向其传递不同的主机（默认情况下为0.0.0.0）。

将其保存到./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})`)
)`

将您的npm脚本更改更改为

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

Answer 2

遇到这些错误时，我遇到了同样的错误：

https://help.crossbrowsertesting.com/faqs/testing/invalid-host-header-error/

就我而言，它是通过重新启动服务来解决的。

如何解决webpack中无效的主机头问题？

2 个答案: