问题
如何解决webpack Invalid Host/Origin header
问题
问题描述
webpack相关版本
package.json
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.13"
webpack.config.js
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: resolve(__dirname, '../src/index.js'),
output: {
path: resolve(__dirname, '../dist'),
filename: 'bundle.js'
},
devServer: { // DevServer 相关配置
contentBase: resolve(__dirname, '../dist'),
host: '0.0.0.0',
port: 4000
},
plugins: [new HtmlWebpackPlugin({
filename: 'index.html',
template: resolve(__dirname, '../src/html/index.html')
})]
}
解决方案
devServer: {
contentBase: resolve(__dirname, '../dist'),
host: '0.0.0.0',
disableHostCheck: true, // 新增该配置项
port: 4000
},
问题定位
这是webpack
本身出于安全考虑,因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是,在我们的开发环境下,可以禁用掉disableHostCheck
这一配置项。
参考文档
Github Issue
webpack 官方文档:disableHostCheck 配置项