问题 如何解决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')
})]
}【自动化构建工具篇|【解决方案】webpack `Invalid Host/Origin header`问题】
文章图片
解决方案
devServer: {
contentBase: resolve(__dirname, '../dist'),
host: '0.0.0.0',
disableHostCheck: true, //新增该配置项
port: 4000
},
问题定位 这是
webpack本身出于安全考虑，因为不检查主机的应用程序容易受到DNS重新绑定攻击。但是，在我们的开发环境下，可以禁用掉disableHostCheck这一配置项。参考文档 Github Issue
webpack 官方文档:disableHostCheck 配置项
相关问题 host:0.0.0.0 Not working
推荐阅读
- JavaScript|web前端入门到实战（好用的Js图表库）
- 接口访问加密方式
- 实用技术|Chrome 技术篇-常用web调试手法（清除缓存并硬性重新加载）
- 有关easyUI的拖动操作中droppable，draggable用法例子
- web前端|CSS科技感四角边框
- ColorBox 演示和说明/API
- SUI 列表 底部无限滚动
- js把时间戳转化为时间
- js jq获取标签的各种方式整理
- 自动化构建工具（二）（特性）