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

Nginx Vuejs应用程序显示无效的主机标头错误循环,nginx,webpack,vue.js,Nginx,Webpack,Vue.js,我在自己的开发服务器上运行了一个vuejs应用程序,现在我可以通过机器的公共IP访问该站点,但在使用nginx将其指向一个域后,它在控制台中显示了一个错误循环 无效的主机头 [WDS]断开连接 因此,脚本、样式注入和自动重新加载不起作用 开发服务器的配置 域的nginx配置 我相信您需要像这样更改nginX配置 server { server_name prajin.prakash.com; listen 80; listen [::]:80; location / {

我在自己的开发服务器上运行了一个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'
  }
};