Vuejs 应用显示“Invalid host header”错误循环。

Question

我正在运行一个Vue.js应用程序，使用其自己的开发服务器。现在我可以通过机器的公共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

Answer 1

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

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

- Douglas Porto

---

有时候可能已经有其他节点了，所以一定要将其附加到根节点上 - 例如，pwa：{}，devServer：{} - 我一开始错过了这个...看到这个让我意识到，嗯...哈哈 - Borzio

可能导致安全漏洞 - 请参见下面的答案（https://dev59.com/dVUK5IYBdhLWcg3w7DgH#62116155） - Andrius

如果可以的话，我会给更多赞。关于vue.configs.js的文档很难找到。devServer: proxy也是非常有用的一个。 - Peter Ajtai

这在 webpack-dev-server v >= 4 中已经不再起作用，请参见下面的答案（https://dev59.com/dVUK5IYBdhLWcg3w7DgH#71736358）。 - Ashutosh Kumar

Answer 2

通常情况下不建议将disableHostCheck: true设为启用状态（因为这可能会导致安全问题），除非您了解并接受风险。

请改为使用以下设置webpack配置：

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

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

注意：适用于运行在Vue.js + Nginx上的应用程序。

- Andrius

---

应该被接受为答案，因为它解释了如何和为什么。 - mik3fly-4steri5k

如果这个答案不会导致一个无效的主机错误，我会很高兴。 - Ryan Leach

Answer 3

在 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。

- zylyye

Answer 4

2022年2月更新：

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

然后，将以下代码粘贴到vue.config.js文件中：

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

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

- Kai - Kazuya Ito

Answer 5

"vue": "^3.2.13",

"@vue/cli-service": "~5.0.0",

module.exports = {
  devServer: {
    allowedHosts: "all",
  },
};

- Оливер Макс

Answer 6

您需要修改vue.config.js文件，它位于您的项目根目录中（与package.json文件相邻）。

v3:

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

v4:

module.exports = {
  devServer: {
    allowedHosts: "all",
  },
};

参考文献：https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

以下是需要翻译的内容：

- Bhargav Prajapati

Answer 7

很抱歉，那是我的失误，我忘记在

build/webpack.dev.conf.js

中加入了disableHostCheck变量。

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

disableHostCheck: config.dev.disableHostCheck, 

- PRAJIN PRAKASH

Answer 8

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

第130行及以上

开发服务器配置如下：

禁用主机检查：true

主机地址：'0.0.0.0'

是否启用https：false

- Ant Formicidae

Answer 9

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

- IVO GELOV

---

添加此内容后，网站将无法正常工作并引发错误。 504网关超时 nginx/1.10.3（Ubuntu） - PRAJIN PRAKASH

disableHostCheck: true,解决了我的问题，不管怎样还是谢谢您的回复。 - PRAJIN PRAKASH