工作小总结&小工具类 Redis AI相关 MQTT Maven mybatis ChatGPT uniapp zookeeper Thymeleaf语法 POI-TL sa-token PowerDesigner16.5 taos数据库 frp echarts Actor模型及Akka thingsboard 大疆无人机对接 CI/CD 教师资格证小任务面试其他职场淘宝客支付宝支付 HBuilder X Flink Java集合类多线程 ES Ribbon eureka Docker java游戏网络通信 Nacos 芋道管理系统 Solr 分布式相关 Dubbo 数据结构 EasyPOI Drools RocketMQ JS 七天深入MySQL实战营书籍 kafka spring Java基础 java web 若依(ruoyi) 分布式事务面试宝典 mysql java8新特性 spring cloud ElasticSearch学习系列 HM_leadnews 即时通讯并发思维&学习 VUE 宝塔面板算法刷题设计模式 RabbitMQ学习系列教程 P3C规范 JVM学习系列反射自定义注解网络美文 PHP源码经验分享资源 git项目 websocket 网赚数据库读写分离测试相关其他随笔 shiro学习系列 fremarker学习系列学习笔录-spring boot 网络文章工作小总结

简介在使用frp作为内网穿透访问VUE项目时候提示：Invalid Host/Origin header

🔔🔔🔔好消息!好消息!🔔🔔🔔

有需要的朋友👉:联系凯哥微信号 kaigejava2022

在使用frp作为内网穿透的时候，配置了多端口穿透(也是第一次配置frp多端口)，端口配置如下：

8079：vue项目的管理系统

8080：vue项目的前台系统

8082：普通的web项目

把frp配置多端口后，访问8082的普通web项目，可以正常穿透访问。但是8079和8080这两个vue项目死活都访问不了。提示错误信息：Invalid Host/Origin header

因为是第一配置frp多端口访问，一直以为是frp配置错误了。反反复复的配置frps、nginx及frpc。配置了好多遍。而且还通过chartgpt方式配置也还是访问不了。折腾了一两个小时。就在要放弃的一瞬间，想到使用百X一下，果然查到了问题原因。

内网穿透访问VUE项目提示：Invalid Host/Origin header的原因：

新版的webpack-dev-server增加了安全验证，默认检查hostname，如果hostname不是配置内的，将中断访问。

解决方案：

// vue.config.js文件中
module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

找到8079和8080的vue项目，修改对应的配置之后，重启项目。等到项目启动成功之后，通过内网穿透映射的域名访问这两个项目，就可以正常访问了