問題出現背景
做微信H5網頁時，使用花生殼內網穿透進行除錯時，打開網頁顯示：invalid host header
分析問題
這句話的意思是：無效的Host請求頭；
因為在vue在除錯時相當于啟動了一個服務器以供我們訪問（當我們build后，就可以放在我們自己的nginx等服務器）
測驗環境下的webpack有一個host檢查功能：webpack的devServer中
如果不配置host就無法訪問，解決辦法有好幾種，可以去設定host，比如：
第一種解決方案
設定允許訪問的域名
module.exports = {
//...
devServer: {
allowedHosts: [
'host.com', // 允許訪問的域名地址，即花生殼內網穿透的地址
'.host.com' // .是二級域名的通配符
],
},
};
還有一種更簡單的解決方案
更簡單的解決方案
設定跳過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,
}
不生效？
必須要重啟！必須要重啟！必須要重啟！
本文來自博客園，作者：無聊猿，公眾號【無聊猿】，轉載請注明原文鏈接：https://www.cnblogs.com/wuliaoyuan/p/16006131.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/443487.html
標籤：其他
上一篇：react 也就這么回事 05 —— 組件 & Props
下一篇：layui框架入門