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

Question

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

error in console

无效的主机头 [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;
  }
}

Answer 1

我相信您需要更改vue.config.js

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

Answer 2

对不起，由于我的错误，我忘记在

中添加disableHostCheck变量。

  

build / webpack.dev.conf.js

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

disableHostCheck: config.dev.disableHostCheck, 

Answer 3

在项目根目录下创建vue.config.js：

然后，将以下代码添加到vue.config.js：

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

*不要忘记重新启动服务器，否则不会反映更改。

Answer 4

通常不建议使用disableHostCheck: true（因为这可能会导致安全问题），除非您理解并接受了风险。

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

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

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

NB：适用于在vuejs + nginx上运行的应用

Answer 5

我的配置在：projects/vue-try/node_modules/@vue/cli-service/lib/options.js

第 130+ 行

开发服务器：{ disableHostCheck: 真, 主机：'0.0.0.0'， https: 假 }

Answer 6

我相信您需要像这样更改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和普通请求添加了单独的代理。