解决vue 2.6通过花生壳ddsn(内网穿透)实时开发报错Invalid Host header和websocket

请先核对自己的vue版本,我的是2.6.14,其他版本未测试

起因

这两天在维护一个基于高德显示多个目标(门店)位置的项目,由于高德要求定位必须使用https服务,遂在本地无法获取到定位坐标信息,于是就想着通过内网穿透的方式临时搭一个测试站进行实时更新开发,于是就有了今天遇到的问题,那就是在本地运行vue前端没有任何问题,但是一旦将本地dev跑起来的项目通过ddns开放出去线上访问就报错了,错误信息如下

1.报错Invalid Host header

首先本地编译没有遇到任何问题,本地也能通过127.0.0.1:8080访问,但是线上就报错Invalid Host header,于是各种折腾当我解决这个问题后又遇到下面一个问题(对了解决这个问题必须谷歌访问,采用火狐访问会遇到如下1.1的问题)

1.1 火狐遇到The operation is insecure.

遇到这个问题网络上也找不到解决方案,就换了谷歌浏览器,发现报错如下 2号报错信息

2.报错

统一解决方案如下:

在vue.config.js中调整devServer的内容,添加allowedHosts: "all",忽略host验证,和 webSocketServer: false , 关闭热重载即可解决,解决这个问题的时候搜索了很多资料,网络上都是各种复制粘贴说什么hot:false的有,说什么inline:false的有,这个在我这边直接跑dev都报错,后来在github上看到一个大佬的解答说webpack4要写成 allowedHosts: "all",什么的,后来遇到websocket报错想的是直接禁用这个就可以了,但是问题是他是怎么来的,配置里面该怎么写网络上没有找到一丝丝关于这个的答案,搜索到的大多都是说websocket在js里面是怎么用的,后来看到dev报错里面有一个webSocketServer选项,给了我启发,问题得以解决,这里分享出来供大家参考

复制代码
	devServer: {
     allowedHosts: "all",
	 webSocketServer: false ,
    proxy: {
    xxxxx
    },
  }
相关推荐
毕业设计制作和分享1 小时前
springboot150基于springboot的贸易行业crm系统
java·vue.js·spring boot·后端·毕业设计·mybatis
键盘不能没有CV键3 小时前
【图片处理】✈️HTML转图片字体异常处理
前端·javascript·html
yantuguiguziPGJ4 小时前
WPF 联合 Web 开发调试流程梳理(基于 Microsoft.Web.WebView2)
前端·microsoft·wpf
大飞记Python4 小时前
部门管理|“编辑部门”功能实现(Django5零基础Web平台)
前端·数据库·python·django
tsumikistep5 小时前
【前端】前端运行环境的结构
前端
你的人类朋友5 小时前
【Node】认识multer库
前端·javascript·后端
Aitter5 小时前
PDF和Word文件转换为Markdown的技术实现
前端·ai编程
mapbar_front6 小时前
面试问题—上家公司的离职原因
前端·面试
昔人'7 小时前
css使用 :where() 来简化大型 CSS 选择器列表
前端·css
昔人'7 小时前
css `dorp-shadow`
前端·css