vue项目本地映射到外网访问时出现 Invalid Host header
背景
通过公网访问本机运行的vue项目,访问时遇到的问题
一、遇到的问题
报错:
Invalid Host/Origin header
原因:
新版的webpack-dev-server增加了安全验证,默认检查hostname,如果hostname不是配置内的,将中断访问。
二、解决方法
方法1:
在vue项目的根目录下创建vue.config.js,并加入以下配置:
module.exports = {
devServer: {
disableHostCheck: true,
}
}
可参考: vue之Error: Unknown option: .devServer.
方法2:
在vue项目的根目录下创建vue.config.js,并加入以下配置:
module.exports = {
devServer: {
compress: true,
disableHostCheck: true, // That solved it
}
}
扩展点其他配置:
devServer: {
compress: true,
inline: true,
port: '8080',
allowedHosts: [
'.csdn.com'
]
},
还有热更新等
附件
参考:i-am-getting-an-invalid-host-header-message-when-connecting-to-webpack-dev-ser
本文来自博客园,作者:所遇所思,转载请注明原文链接:https://www.cnblogs.com/mynxg/p/17989283