【已解决】在使用frp内网穿透访问VUE项目提示:Invalid Host/Origin header 解决方案

项目配置

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

8079:vue项目的管理系统

8080:vue项目的前台系统

8082:普通的web项目

更高frp相关问题

:凯哥个人博客kaigejava#com,搜索【frp】

把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
  }
}

【已解决】在使用frp内网穿透访问VUE项目提示:Invalid Host/Origin header 解决方案_第1张图片

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

你可能感兴趣的:(frp,凯哥Java,vue.js,前端,javascript)