問題出現(xiàn)背景
做微信H5網(wǎng)頁時，使用花生殼內(nèi)網(wǎng)穿透進行調(diào)試時棺妓，打開網(wǎng)頁顯示：invalid host header
分析問題
這句話的意思是：無效的Host請求頭；
因為在vue在調(diào)試時相當(dāng)于啟動了一個服務(wù)器以供我們訪問（當(dāng)我們build后亚侠，就可以放在我們自己的nginx等服務(wù)器）
測試環(huán)境下的webpack有一個host檢查功能：webpack的devServer中
如果不配置host就無法訪問什往，解決辦法有好幾種，可以去設(shè)置host迎捺，比如：
第一種解決方案
設(shè)置允許訪問的域名
module.exports = {
//...
devServer: {
allowedHosts: [
'host.com', // 允許訪問的域名地址举畸，即花生殼內(nèi)網(wǎng)穿透的地址
'.host.com' // .是二級域名的通配符
],
},
};
還有一種更簡單的解決方案
更簡單的解決方案
設(shè)置跳過host檢查
// vue3 vue.config.js
module.exports = {
// 跳過檢查host
devServer: { disableHostCheck: true }
}
// 在vue-cli版本為2.x的情況下修改webpack.dev.conf.js中的devServer對象加入disableHostCheck: true
devServer: {
disableHostCheck: true,
}
不生效？
必須要重啟凳枝！必須要重啟抄沮！必須要重啟！
歡迎交流探討.jpg
