Vuejs 应用程序显示无效主机 header 错误循环

Question

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

error in console

无效主机header [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

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

Answer 2

对不起，是我的失误，我忘记在

中添加 disableHostCheck 变量

build/webpack.dev.conf.js

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

disableHostCheck: config.dev.disableHostCheck,

Answer 3

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

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

Answer 4

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

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

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

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

注意：对于 vuejs + nginx 上的应用运行

Answer 5

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

第 130 行+

开发服务器：{ 禁用主机检查：真，主机：'0.0.0.0'， https: 假的 }

Answer 6

2022 年 2 月更新：

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

然后，将下面的代码粘贴到 vue.config.js:

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

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

Answer 7

在webpack-dev-server@v3:

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

在webpack-dev-server@v4中，选项disableHostCheck被移除，使用allowedHosts代替：

module.exports = {
  devServer: {
    // 'auto' | 'all' [string] here
    allowedHosts: 'all',
  },
};

在此处查看文档 https://webpack.js.org/configuration/dev-server/#devserverallowedhosts

Vuejs 应用程序显示无效主机 header 错误循环

Vuejs app showing Invalid host header error loop

javascript

nginx

node.js

vue.js

nginx-config

编辑：

第 130 行+

2022 年 2 月更新：