Vuejs 应用程序显示无效的主机标头错误循环

Question

我在自己的开发服务器上运行 vuejs 应用程序，现在我可以通过机器的公共 IP 访问该站点，但是在使用 nginx 将其指向域后，它在控制台中显示错误循环

控制台中的错误

无效的主机标头 [WDS] 已断开连接！

由于这个脚本，样式注入和自动重新加载不起作用。

开发服务器的配置

dev: {
  assetsSubDirectory: "static",
  assetsPublicPath: "/",
  disableHostCheck: true,
  host: "0.0.0.0", // '192.168.2.39',//can be overwritten by
  process.env.HOST
  port: 8080,
  autoOpenBrowser: false,
  errorOverlay: false,
  notifyOnErrors: false,
  poll: true,
  devtool: "cheap-module-source-map",
  cacheBusting: true,
  cssSourceMap: true
},

域的 nginx 配置

server
{
  listen 80 ;
  listen [::]:80;
  server_name prajin.prakash.com;
  location / {
        proxy_pass http://localhost:8081;
  }
}

原文由 PRAJIN PRAKASH 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我相信你需要改变 vue.config.js

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

原文由 Douglas Porto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

一般不建议使用 disableHostCheck: true （可能会导致安全问题），除非您了解并接受风险。

请改为尝试如下设置 webpack 配置：

在 vue.config.js 的应用根目录中添加

module.exports = {
  devServer: {
    public: 'subdomain.domain.ext:port'
  }
};

注意：适用于在 vuejs + nginx 上运行的应用程序

原文由 Andrius 发布，翻译遵循 CC BY-SA 4.0 许可协议