如何在Vue 3项目中解决“Invalid host header”错误？

Question

我正在尝试使用DigitalOcean上的云部署一个简单的测试应用程序。 我使用vue cli（VUE3）创建了一个新的应用程序。 在将其docker化并暴露到8080后，我配置了nginx，以便它将流量从端口：80转到容器上的端口：8080。 一切正常，但当我尝试访问页面时，出现“无效的主机头”错误。 我在谷歌上搜索后，每个人都建议创建一个vue.config.js文件，并添加以下代码：

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

我尝试了这个解决方案，但是没有任何改变。我该如何修复这个错误呢？我还读到说这种解决方案会创建漏洞，有没有一种方法可以不使用这种解决方案进行修复呢？

- kri-dev

Answer 1

在你的vue.config.js文件中，你可以尝试这些设置。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        allowedHosts: "all"
    }
})

- razorxan

---

这个产生了一个错误。请查看Oren Hahiashvili的答案以获取正确的语法。 - hkong

Answer 2

找到解决方案了！

上面提到的解决方案对我不起作用。

我不确定属性allowedHosts何时更改。

目前，我们应该向allowedHosts属性提供一个数组。

devServer: {
    allowedHosts: [
      'yourdomain.com'
    ]
}

只需查找文件vue.config.js，然后将yourdomain.com替换为您自己的个人域名。

- Oren Hahiashvili

Answer 3

当您无法预先知道哪些主机将访问devServer时（例如，在多个环境中进行测试时），一种替代Oren Hahiashvili答案的方法是在vue.config.js中设置devServer.disableHostCheck。例如：

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

请注意，这种方法不如Oren Hahiashvili的答案安全，因此只有在您不知道主机并且仍然需要使用devServer进行服务时才使用。

- hkong