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

Posted 2023-02-22

【中文标题】Vuejs 应用程序显示无效的主机标头错误循环

【英文标题】：Vuejs app showing Invalid host header error loop

【发布时间】：2018-12-07 14:34:22

【问题描述】：

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

【参考方案1】：

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

module.exports = 
  devServer: 
    disableHostCheck: true
  

【讨论】：

拯救了我的一天。非常感谢！

有时已经有其他节点了，所以请务必将其附加到根目录 - 例如，pwa: , devServer: - 一开始我错过了...看到这个我意识到，呃......大声笑

谢谢道格拉斯。我只是浪费了一个小时试图弄清楚这一点。不知道为什么 webpack 会浪费这么多时间，它应该是为了帮助人们不浪费时间。

可能会导致安全漏洞 - 请参阅下面的答案 (***.com/a/62116155/3467734)

如果可以的话，我会支持更多。 vue.configs.js 周围的文档很难找到。 devServer：代理是另一个非常有用的。

【参考方案2】：

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

请尝试如下设置 webpack 配置：

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

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

注意：适用于在 vuejs + nginx 上运行的应用程序

【讨论】：

应该是公认的答案，因为它解释了如何和为什么

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

【参考方案3】：

2022 年 1 月更新：

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

然后，将此代码粘贴到 vue.config.js：

module.exports = 
  devServer: 
    disableHostCheck: true
  

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

【参考方案4】：

对不起，这是我的错误，我忘记在其中添加 disableHostCheck 变量

构建/webpack.dev.conf.js

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

disableHostCheck: config.dev.disableHostCheck, 

【参考方案5】：

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

第 130+ 行

开发服务器： disableHostCheck：真， 主机：'0.0.0.0'， https：假的

【参考方案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 和普通请求添加了单独的代理。

【讨论】：

添加此站点后，该站点将无法运行并引发错误。 504 网关超时 nginx/1.10.3 (Ubuntu)

disableHostCheck: true, 解决了我的问题，无论如何感谢您的重播..