vue 測試環境顯示 Invalid Host header

2019-05-19 18:10:19

目的

建立一個專案,測試 PWA - Add to Home Screen 的效果,解決 iOS 設備加入主畫面之後,透過 加入主畫面的 icon 點擊進去時,沒有顯示圖片。

過程

  1. vue create <repository_name>,建立專案。

  2. yarn serve,把專案跑起來。

  3. locate hosts,查詢 hosts 檔案位置,綁定 Mac 的 ip 與對應的 host。

  4. ipconfig getifaddr en0ifconfig en0,來查看 Mac 連到 ip。

  5. sudo vim /private/etc/hosts 延續步驟 3 的目的。

  6. Chrome 輸入綁定的 host,竟然顯示 Invalid Host header !?

預設的 http://localhost:8080/ 是沒問題的。 http://163.13.xx.xxx:8080/ 也沒毛病。 但是 test.com 就顯示 Invalid Host header

解法

在專案的 / 新增 vue.config.js

module.exports = {
        // options...
    devServer: {
        disableHostCheck: true
    }
}

參考文章: new vue.js project preview yields "Invalid Host header" 解决vue-cli脚手架访问出现“Invalid Host header”

aa
2019-08-12 13:09:49

test