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 resource post请求时遇到的坑

    vue resource post请求时遇到的坑

    这篇文章主要介绍了vue resource post请求时遇到的坑,需要的朋友可以参考下
    2017-10-10
  • vue3项目中各个文件的作用详细介绍

    vue3项目中各个文件的作用详细介绍

    在Vue3项目中,通常会有以下一些常见的目录和文件,下面这篇文章主要给大家介绍了关于vue3项目中各个文件的作用,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue 动态添加class,三个以上的条件做判断方式

    vue 动态添加class,三个以上的条件做判断方式

    这篇文章主要介绍了vue 动态添加class,三个以上的条件做判断方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vite项目的根目录中的env.d.ts类型声明文件里要写什么

    vite项目的根目录中的env.d.ts类型声明文件里要写什么

    这篇文章主要介绍了vite项目的根目录中的env.d.ts类型声明文件里要写什么,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 用vue写一个日历

    用vue写一个日历

    这篇文章主要介绍了如何利用vue写一个日历,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-11-11
  • vue.js踩坑之ref引用细节点讲解

    vue.js踩坑之ref引用细节点讲解

    这篇文章主要介绍了vue.js踩坑之ref引用细节点讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue Router路由hash模式与history模式详细介绍

    Vue Router路由hash模式与history模式详细介绍

    Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转
    2022-08-08
  • Vue.js数字输入框组件使用方法详解

    Vue.js数字输入框组件使用方法详解

    这篇文章主要为大家详细介绍了Vue.js数字输入框组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue diff算法全解析

    vue diff算法全解析

    这篇文章主要介绍了vue diff算法的使用,帮助大家更好的理解和学习使用vue,感兴趣的朋友可以了解下
    2021-04-04
  • vue flex 布局实现div均分自动换行的示例代码

    vue flex 布局实现div均分自动换行的示例代码

    这篇文章主要介绍了vue flex 布局实现div均分自动换行,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08

最新评论