Vue无效的主机头

Posted 2023-02-22

【中文标题】Vue无效的主机头

【英文标题】：Vue invalid host header

【发布时间】：2019-05-23 05:23:57

【问题描述】：

不知道为什么 2 天前我的项目（通过 vue create 创建）停止工作 - 在 Chrome 中我得到了

无效的主机头

和

WDS 已断开

错误。在 cmd 中，一切都正确编译（ npm run serve ） 我不知道 webpack，所以我不知道如何修复它。

我已经做了什么：

重新安装节点 删除并重新安装了所有 npm 包

【参考方案1】：

这个问题是由最近修复的这个 webpack-dev-server issue 引起的。

为避免出现 Invalid Host/Origin 标头错误，请将其添加到 vue.config.js 文件中的 devServer 条目中：

disableHostCheck: 真

【参考方案2】：

请注意，disableHostCheck: true不推荐，因为它会创建 security vulnerabilities。

对于在我的本地机器上运行的开发服务器，我可以通过在 vue-cli-service serve 中显式设置 --host 来解决此问题：

scripts: 
  serve: "vue-cli-service serve --host myapp.localhost"

--host 选项记录在 here。

在浏览器中的myapp.localhost:8080 下访问应用程序（假设您使用默认端口8080）。

【参考方案3】：

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

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

module.exports = 
  devServer: 
    disableHostCheck: true
  

最后，你必须再次运行命令：

npm run serve

【参考方案4】：

在搜索相同的“Invalid Host Header”问题时发现了这个问题。这是我解决它的方法。

我正在远程服务器上的 Docker 中运行 Vue 开发服务器 npm run serve。无法通过http://example.com:8080 访问它并显示上述错误消息。

正确安全的方法是将域名添加到vue.config.js文件中：

"devServer": 
  "public": "example.com"

这是一个使用 Vue Cli 命令启动的全新 vue 项目：vue create myproject，并通过 vue add vuetify 添加了 Vuetify。之后我的vue.config.js的全部内容是：

module.exports = 
  "transpileDependencies": [
    "vuetify"
  ],
  "devServer": 
    "public": "example.com"
  

【参考方案5】：

这是因为开发服务器不接受外部请求。为了解决这个问题，我们需要配置vue.config.js，如下所示。

如果你的vue项目中没有找到vue.config.js，请在根目录下创建文件并添加以下行。

module.exports = 
    // options...
    devServer: 
        disableHostCheck: true
    

Source