如何解决webpack中无效的主机头问题? [英] How to resolve invalid host header issue in webpack?

问题描述

如果我通过具有在线ip的浏览器访问我的页面，则会收到无效的主机头错误.在本地，它运行良好，但是我不知道为什么在实时服务器中会出现此错误.我正在按照三个步骤来运行我的react js应用程序，即， 'npm install' 'npm run build' "npm运行服务"

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配置文件主机设置

///如果要访问，则将本地主机替换为0.0.0.0 //通过wifi或虚拟机访问您的应用

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

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

推荐答案

Webpack开发服务器最近已默认添加主机检查作为安全措施

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

您现在需要通过disableHostCheck选项禁用它(如果可以公开访问则不建议这样做)，或者指定启动服务器--public your-hostname-or-public-ip:3000

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

问题名称中的Webpack和webpack-dev-server标记具有误导性-这实际上完全使用了其他服务器...

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

看起来好像与webpack根本不相关-您正在使用其他服务器pushstate-server，该服务器奇怪地在模块中具有host选项，但未在二进制文件中公开.您将必须滚动自己的服务器启动脚本才能将其他主机传递给它(默认为0.0.0.0).

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

将其保存到./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脚本更改更改为

Change your npm script change to

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

这篇关于如何解决webpack中无效的主机头问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！