Vue无效的主机头

时间:2018-12-23 20:04:05

标签: webpack webpack-dev-server vue-cli-3

不知道为什么两天前我的项目(通过 vue create 创建)停止工作-在Chrome浏览器中我得到

  

无效的主机头

  

WDS断开连接

错误。在cmd中,所有内容均可正确编译( npm run serve ) 我不知道webpack,所以我不知道如何解决它。

我已经做过的事情:

  • 重新安装的节点
  • 删除并重新安装了所有npm软件包

4 个答案:

答案 0 :(得分:2)

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

为避免出现无效的主机/来源标头错误,请将其添加到vue.config.js文件的devServer条目中:

disableHostCheck:是

答案 1 :(得分:1)

在搜索相同的“无效主机头”问题时发现了此问题。这是我解决的方法。

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

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

"devServer": {
  "public": "example.com"
}

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

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

答案 2 :(得分:0)

请注意,不推荐使用 disableHostCheck: true,因为它会创建 security vulnerabilities

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

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

--host 选项记录在 here

在浏览器中的 myapp.localhost:8080 下访问该应用(假设您使用的是默认端口 8080)。

答案 3 :(得分:0)

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

enter image description here

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

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

最后,您必须再次运行该命令:

npm run serve