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
    }
}