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踩坑之backgroundImage路径问题及解决

    vue踩坑之backgroundImage路径问题及解决

    这篇文章主要介绍了vue踩坑之backgroundImage路径问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 如何获取vue单文件自身源码路径

    如何获取vue单文件自身源码路径

    这篇文章主要介绍了如何获取vue单文件自身源码路径,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue浅析讲解动态组件与缓存组件及异步组件的使用

    Vue浅析讲解动态组件与缓存组件及异步组件的使用

    这篇文章主要介绍了Vue开发中的动态组件与缓存组件及异步组件的使用教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • Vue 2.0的数据依赖实现原理代码简析

    Vue 2.0的数据依赖实现原理代码简析

    本篇文章主要介绍了Vue 2.0的数据依赖实现原理代码简析,主要从初始化的数据层面上分析了Vue是如何管理依赖来到达数据的动态响应,有兴趣的可以了解一下
    2017-07-07
  • js 实现拖拽排序详情

    js 实现拖拽排序详情

    这篇文章主要介绍了js 实现拖拽排序,拖拽排序对于小伙伴们来说应该不陌生,平时工作的时候,可能会选择使用类似Sortable.js这样的开源库来实现需求。但在完成需求后,大家有没有没想过拖拽排序是如何实现的呢?感兴趣得话一起来看看下面文章得小心内容吧
    2021-11-11
  • Vue首屏白屏问题的原因和解决方法讲解

    Vue首屏白屏问题的原因和解决方法讲解

    这篇文章主要介绍了Vue首屏白屏问题的原因和解决方法讲解,Vue首屏白屏问题是指在页面初次加载时,部分或全部内容无法正常显示,出现空白的情况。其原因可能是因为页面渲染速度过慢,或者是因为网络请求等问题导致数据无法及时加载
    2023-05-05
  • 浅谈vue中document.getElementById()拿到的是原值的问题

    浅谈vue中document.getElementById()拿到的是原值的问题

    这篇文章主要介绍了浅谈vue中document.getElementById()拿到的是原值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中使用vue-pdf组件实现文件预览及相应报错解决

    vue中使用vue-pdf组件实现文件预览及相应报错解决

    在需求中,经常遇见pdf的在线预览效果,很多pdf插件不支持vue3,或者是没有集成翻页放大缩小功能,比如vue-pdf,下面这篇文章主要给大家介绍了关于vue中使用vue-pdf组件实现文件预览及相应报错解决的相关资料,需要的朋友可以参考下
    2022-09-09
  • vue函数@click.prevent的使用解析

    vue函数@click.prevent的使用解析

    这篇文章主要介绍了vue函数@click.prevent的使用解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue自动化注册全局组件脚本分享

    Vue自动化注册全局组件脚本分享

    这篇文章主要介绍了Vue自动化注册全局组件脚本,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论