解决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
    },
  }
相关推荐
PieroPc25 分钟前
CAMWATCH — 局域网摄像头监控系统 Fastapi + html
前端·python·html·fastapi·监控
巴巴博一2 小时前
2026 最新:Trae / Cursor 一键接入 taste-skill 完整教程(让 AI 前端告别“AI 味”)
前端·ai·ai编程
kyriewen2 小时前
半夜三点线上崩了,AI替我背了锅——用AI排错,五分钟定位三年老bug
前端·javascript·ai编程
kyriewen2 小时前
我让 AI 当了 24 小时全年无休的“毒舌考官”
前端·ci/cd·ai编程
hexu_blog2 小时前
vue+java实现图片批量压缩
java·前端·vue.js
IT_陈寒2 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
lifejump3 小时前
Empire(帝国)CMS 7.5 XSS注入
前端·安全·xss
无风听海3 小时前
OAuth 2.0 前端通道与后端通道深入剖析
前端·oauth
sakiko_3 小时前
UIKit学习笔记8-发送照片、拍摄照片并发送
前端·swift·uikit
_code_bear_3 小时前
OpenSpec CLI 与 OPSX 工作流说明
前端·后端·架构