Vue 无效主机头

Question

不知道为什么两天前我的项目（通过 vue create 创建）停止工作 - 在 Chrome 中我明白了

无效的主机标头

和

WDS 已断开

错误。在 cmd 中，一切都可以正确编译（npm runserve）我不了解 webpack，所以我不知道如何修复它。

我已经做了什么：

Answer 1

此问题是由最近已修复的 webpack-dev-server issue 引起的。

为了避免出现 Invalid Host/Origin header 错误，请将其添加到 vue.config.js 文件上的 devServer 条目中：

禁用主机检查：true

Answer 2

请注意，

disableHostCheck: true

不建议，因为它会产生安全漏洞。

对于在本地计算机上运行的开发服务器，我可以通过在

--host

中显式设置

vue-cli-service serve

来解决问题：

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

--host

选项记录在here。

在浏览器中的

myapp.localhost:8080

下访问该应用程序（假设您使用的是默认端口

）。

Answer 3

发现此问题搜索相同的“无效主机标头”问题。这是我解决的方法。

我正在远程服务器上的 Docker 中运行 Vue 开发服务器

npm run serve

。无法在

http://example.com:8080

访问它，并出现上述错误消息。

正确且安全的方法是将域名添加到

vue.config.js

文件中：

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

这是一个使用 Vue Cli 命令启动的新 vue 项目：

vue create myproject

，并通过

vue add vuetify

添加了 Vuetify。之后我

vue.config.js

的全部内容是：

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

Answer 4

这是因为开发服务器不接受外部请求。为了解决这个问题，我们必须如下配置

vue.config.js

。

如果在您的 vue 项目中找不到

vue.config.js

，请在根目录中创建该文件并添加以下行。

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

Answer 5

您可以在 vue.config.js 中使用 allowedHosts: 'all'

模块.导出= { 开发服务器：{ allowedHosts: '全部', } }