vue项目中的遇错:Invalid Host header问题

更新时间：2023年07月26日 08:32:39 作者：sayyy

这篇文章主要介绍了vue项目中的遇错:Invalid Host header问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue项目遇错:Invalid Host header

现象

在A服务器上使用npm run serve 启动项目，访问A服务器的地址，无错误。

在B服务器上使用nginx代理到A服务器，访问B服务器的地址，遇错“Invalid Host header”。

解决办法

在vue.config.js的devServer节点下加入disableHostCheck: true配置项。

在这里插入图片描述

vue-cli4.x项目启动本地出现 invalid host header的原因

近段时间有个项目是单点登录的，项目里需要获取用户token，故本地配置host文件来访问线上项目，拿到cookie存储的用户token，所以配置了hosts文件。

之前用过vue-cli2.x,我们只需要配饰hosts文件就可以了。

因为webpack是默认设置可配置host，但是新版的vue-cli4.x将这项配置独立出来，需要我们手动配置，其实也很简单，只需在vue.config.js文件中添加一个属性并设置值为true

module.exports ={
    devServer: {
    // 本地配置host生效
    disableHostCheck:true,
  },
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

浅谈Vue 性能优化之深挖数组
这篇文章主要介绍了浅谈Vue 性能优化之深挖数组，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
vue3中如何使用d3.js绘制流程图(TS语法)
这篇文章主要给大家介绍了关于vue3中如何使用d3.js绘制流程图的相关资料,D3.js是由javaScript语言编写绘图库,其原理是通过调用一系列内置函数,生成SVG,并在网页渲染,需要的朋友可以参考下
2023-10-10
vue+SSM实现验证码功能
这篇文章主要介绍了vue+SSM实现验证码功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-12-12
vue.js单文件组件中非父子组件的传值实例
今天小编就为大家分享一篇vue.js单文件组件中非父子组件的传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3实现组件拖拽实时预览功能
这篇文章主要介绍了Vue3实现组件拖拽实时预览功能,对于组件拖拽预览,用户可以在含有各种功能组件的列表中,选择需要的组件进行拖拽,需要的朋友可以参考下
2023-12-12
解决Vue打包之后文件路径出错的问题
下面小编就为大家分享一篇解决Vue打包之后文件路径出错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue中设置滚动条方式
这篇文章主要介绍了在vue中设置滚动条的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Vue中computed、methods与watch的区别总结
这篇文章主要给大家介绍了关于Vue中computed、methods与watch区别的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
Vue nextTick获取更新后的DOM的实现
本文主要介绍了Vue nextTick获取更新后的DOM的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
在vue.js中抽出公共代码的方法示例
这篇文章主要给大家介绍了在vue.js中抽出公共代码的方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-06-06