解決 Vue 項目 invalid host header 問題（兩種方案）

問題出現背景

做微信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,
}

不生效？

必須要重啟！必須要重啟！必須要重啟！