docker 如何修复“无效主机头”错误在vue 3项目?

bkkx9g8r  于 2022-12-11  发布在  Docker
关注(0)|答案(3)|浏览(178)

我特灵在云上部署一个简单的测试应用程序与数字海洋。我创建了一个新的应用程序与vue cli(VUE3)。在我dockerized应用程序和暴露到8080。我配置nginx,使其路由流量从端口:80到:8080的容器。一切都很好,但当我试图访问页面,我得到这个错误“无效的主机头”。我搜索谷歌和每个人都建议创建一个vue.config.js文件与以下代码:

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

我尝试了这个解决方案,但没有任何改变。我如何修复这个错误?我还读到这种解决方案会产生漏洞,没有这个解决方案有没有办法修复?提前感谢您的回应

oalqel3c

oalqel3c1#

在您的vue.config.js文件中,您可以尝试以下设置

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

gajydyqb2#

找到解决方案!

上面提到的解决方案对我不起作用。
我不确定属性allowedHosts是何时更改的。
目前,我们假定为allowedHosts属性提供一个数组。

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

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

wpcxdonn

wpcxdonn3#

当您事先不知道哪些主机将访问devServer时(例如,在多个环境中进行测试时),Oren Hahiashvili的答案的替代方法是在vue.config.js中设置devServer.diableHostCheck

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

请注意,这比Oren Hahiashvili的答案安全,因此只有在您不知道主机时才使用它,并且您仍然需要使用devServer提供服务。

相关问题