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

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

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

因此，脚本、样式注入和自动重新加载不起作用

开发服务器的配置

域的nginx配置

---

我相信您需要像这样更改nginX配置

server {
  server_name prajin.prakash.com;
  listen 80;
  listen [::]:80;

  location / {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
  }
  location /sockjs-node {
    proxy_pass http://localhost:8080;
    proxy_http_version 1.1;
    proxy_set_header Upgrade websocket;
    proxy_set_header Connection upgrade;
  }
}

编辑：

---

为WebSocket和普通请求添加了单独的代理。

很抱歉，这是由于我的错误，我忘记在中添加disableHostCheck变量

build/webpack.dev.conf.js

添加以下内容解决了我的问题

disableHostCheck: config.dev.disableHostCheck, 

---

我认为您需要更改

vue.config.js

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

---

通常不建议

禁用主机检查：true

（因为这可能会导致安全问题），除非您理解并接受风险

请改为按如下方式尝试设置网页包配置：

vue.config.js中的应用程序内root添加

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

---

注意：对于在vuejs+nginx上运行的应用程序，我的配置位于：projects/vue try/node_modules/@vue/cli service/lib/options.js

第130行+ 开发服务器：{ disableHostCheck:true， 主持人：“0.0.0.0”， https:false

---

}

添加此选项后，网站将无法正常运行并引发错误。504网关超时nginx/1.10.3（Ubuntu）

disableHostCheck:true，

修复了我的问题，无论如何谢谢你的重播..挽救了我的一天。谢谢！有时已经有其他节点了，所以一定要在根上附加这个-例如，pwa:{}，devServer:{}--我一开始没有注意到这个。。。看到这让我意识到。。。谢谢道格拉斯。我只是浪费了一个小时想弄明白。不知道为什么webpack如此浪费时间，它应该帮助人们不浪费时间。可能会导致安全漏洞-请参阅下面的答案（）谢谢，非常有用！应该是可接受的答案，因为它解释了如果没有导致无效的主机错误，我会对这个答案感到高兴的方式和原因。

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

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