Vue 無效主機 header

Question

不知道為什么 2 天前我的項目（通過vue create 創建）停止工作 - 在 Chrome 中我得到

主機無效 Header

和

WDS 斷開連接

錯誤。 在 cmd 中，一切都正確編譯（ npm 運行服務）我不知道 webpack，所以我不知道如何修復它。

我已經做了什么：

Answer 1

這個問題是由最近修復的 webpack-dev-server問題引起的。

為避免出現 Invalid Host/Origin 標頭錯誤，請將其添加到 vue.config.js 文件中的 devServer 條目中：

disableHostCheck: 真

Answer 2

發現這個問題搜索相同的“無效的主機頭”問題。 這是我解決它的方法。

我正在遠程服務器上的 Docker 中運行 Vue dev server npm run serve 。 無法在http://example.com:8080上訪問它並顯示上述錯誤消息。

正確且安全的方式是將域名添加到vue.config.js文件中：

"devServer": {
  "public": "example.com"
}

這是一個使用 Vue Cli 命令啟動的全新 vue 項目： vue create myproject with Vuetify 通過vue add vuetify 。 之后我的vue.config.js全部內容是：

module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  "devServer": {
    "public": "example.com"
  }
}

Answer 3

請注意，不推薦使用disableHostCheck: true因為它會產生安全漏洞。

對於在本地機器上運行的開發服務器，我可以通過在vue-cli-service serve顯式設置--host來解決問題：

scripts: {
  serve: "vue-cli-service serve --host myapp.localhost"
}

此處記錄了--host選項。

在瀏覽器中訪問myapp.localhost:8080下的應用程序（假設您使用默認端口8080 ）。

Answer 4

在項目根目錄下創建vue.config.js ：

然后，將以下代碼添加到vue.config.js ：

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

最后，您必須再次運行該命令：

npm run serve

Answer 5

這是因為開發服務器不接受外部請求。 為了解決這個問題，我們必須如下配置vue.config.js 。

如果在您的 vue 項目中找不到vue.config.js ，請在根目錄下創建該文件並添加以下行。

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