解决vue 2.6通过花生壳ddsn(frp内网穿透)实时开发报错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},}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/649142.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV笔记之图像处理中遮罩和掩模的关系

OpenCV笔记之图像处理中遮罩和掩模的关系 code review 文章目录 OpenCV笔记之图像处理中遮罩和掩模的关系1.遮罩详解遮罩的创建遮罩的应用遮罩的主要应用遮罩的类型如何创建遮罩遮罩在图像处理中的应用方式 2.遮罩和掩模的关系 1.遮罩详解 在图像处理中,遮罩&#…

字符串和格式化输入/输出

本文参考C Primer Plus进行C语言学习 文章目录 strlen()函数sizeof使用数据类型 1.strlen()函数 之前提到的sizeof运算符它以字节为单位给出对象的大小。strlen()函数给出字符串中的字符长度。 #include<stdio.h> #include<string.h> #define PRAISE "You ar…

IS-IS:05 ISIS开销值和协议优先级

IS-IS 协议为路由器的每个 IS-IS 接口定义并维护了一个 level-1 开销值和一个 level-2开销值。开销值可以在接口上或者全局上手动配置&#xff0c;也可以使用 auto-cost自动计算确定。 修改接口cost&#xff1a; int g0/0/0 isis cost 50修改全局cost&#xff1a; isis cir…

Github 无法正常访问?一招解决

查询IP网址: https://ip.chinaz.com/ 主页如下&#xff1a; 分别查询以下三个网址的IP&#xff1a; github.com github.global.ssl.fastly.net assets-cdn.github.com 修改 hosts 文件&#xff1a; 将 /etc/hosts 复制到 home 下 sudo cp /etc/hosts ./ gedit hosts 在底下…

【C语言】(3)字符

字符串 1. 字符串简介 在C语言中&#xff0c;字符串是由字符数组构成的序列&#xff0c;以空字符&#xff08;\0&#xff09;结尾。这个空字符不可见&#xff0c;用于标记字符串的结束。C语言中没有专门的字符串类型&#xff0c;通常使用字符数组表示字符串。 2. 声明和初始…

Facebook 广告帐户:多账号运营如何防止封号?

Facebook目前是全球最受欢迎的社交媒体平台之一&#xff0c;拥有超过27亿活跃用户。因此&#xff0c;它已成为个人和企业向全球受众宣传其产品和服务的重要平台。 然而&#xff0c;Facebook 制定了广告商必须遵守的严格政策和准则&#xff0c;以确保其广告的质量和相关性&…

一文搞懂Jenkins持续集成解决的是什么问题

1、持续集成的定义 大师 Martin Fowler 是这样定义持续集成的: 持续集成是一种软件开发实战, 即团队开发成员经常集成他们的工作. 通常, 每个成员每天至少集成一次, 也就意味着每天可能发生多次集成. 持续集成并不能消除Bug, 而是让它们非常容易发现和改正. 根据对项目实战的…

【C++11并发】mutex 笔记

简介 在多线程中往往需要访问临界资源&#xff0c;C11为我们提供了mutex等相关类来保护临界资源&#xff0c;保证某一时刻只有一个线程可以访问临界资源。主要包括各种mutex&#xff0c;他们的命名大都是xx_mutex。以及RAII风格的wrapper类&#xff0c;RAII就是一般在构造的时…

docker 修改默认存储位置

✨✨✨✨✨✨✨ &#x1f380;前言&#x1f381;查看前面docker储存位置&#x1f381;移动文件位置&#x1f381;修改配置文件docker.service&#x1f381;修改daemon.json&#x1f381;加载配置并重启 &#x1f380;前言 最近服务出现系统盘满了,发现其中docker存储占用很大一…

Keycloak - docker 运行 前端集成

Keycloak - docker 运行 & 前端集成 这里的记录主要是跟我们的项目相关的一些本地运行/测试&#xff0c;云端用的 keycloak 版本不一样&#xff0c;不过本地我能找到的最简单的配置是这样的 docker 配置 & 运行 keycloak keycloak 有官方(Red Hat Inc.)的镜像&#…

基于固件库的RT-THREAD移植

为什么要使用操作系统 当我们进入嵌入式这个领域的时候&#xff0c; 往往首先接触的都是单片机编程&#xff0c; 单片机编程又首选 51 单片机来入门。 这里面说的单片机编程通常都是指裸机编程&#xff0c;即不加入任何 RTOS&#xff08;Real Time Operation System 实时操作系…

药物使用不当可能会导致耳聋,尤其是这6类,需警惕

耳聋的原因有很多&#xff0c;其中之一就是药物使用不当。有些药物具有耳毒性&#xff0c;也就是说&#xff0c;它们会损害内耳的结构和功能&#xff0c;导致听力下降或丧失。这种药物性耳聋有时是可逆的&#xff0c;有时则是永久的。那么&#xff0c;到底哪些药物会导致耳聋和…

ctf-idea调试jar包

0.拿到jar包并解压 进入解压出来的目录,然后以该目录打开项目 1.设置maven 设不设置都行 2.添加依赖 添加两个依赖, boot-inf下的 classes和lib 3.配置调试器 添加 remote jvm debug 1.根据jdk版本选择调试参数 2.选择module classpath为解压后的文件夹名 如图,运行jar包的…

CDR绘图软件|安装教程来了(小白福利:有红包封面领取哦!)

前言 今天给小伙伴们讲讲&#xff1a;如何安装CDR软件。 如果未来的你想从事平面设计/广告行业&#xff0c;那应该就会接触到CDR这款软件。 CorelDRAW Graphics Suite是加拿大Corel公司的平面设计软件&#xff1b;该软件是Corel公司出品的矢量图形制作工具软件&#xff0c;这…

Confluence 的文章导入到 YouTrack KB 中

YouTrack 是有一个 KB 的&#xff0c;我们可以吧 Confluence 的文章全部导入到 YouTrack 的 KB 中。 首先&#xff0c;你需要具有管理员权限&#xff0c;然后选择导入。 然后可以在打开的界面中新增一个导入。 在新增导入中输入 Confluence 在随后的界面中输入你 Confluence …

【Hexo博客|Fluid主题】实现链接卡片效果

文章目录 前言一、CardLink库二、配置步骤1. 添加静态js文件2. 使库文件生效3. 编写启用CardLink4. 查看效果效果与前面一致。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/img_convert/06e0630f994d4d67a90e18e291c3fdc5.png#pic_center) 总结 前言 今天在阅读Github…

格子表单GRID-FORM | 嵌套子表单与自定义脚本交互

格子表单/GRID-FORM已在Github 开源&#xff0c;如能帮到您麻烦给个星&#x1f91d; GRID-FORM 系列文章 基于 VUE3 可视化低代码表单设计器嵌套表单与自定义脚本交互 新版本功能 &#x1f389; 不觉间&#xff0c;GRID-FORM 已经开源一年&#xff08;2023年1月29日首次提交…

通过FileZilla配置FTP

FileZilla服务端的安装 在虚拟机里安装FileZilla服务器 FileZilla的官网 下载一个客户端和一个服务端的FileZilla 如果已经有了一个客户端&#xff0c;可以不下用载。 FileZilla的配置 说明一下&#xff1a;通过FileZilla配置FTP有两种模式&#xff0c;我们先用被动模式 下载…

GoZero微服务个人探究之路(九)api文件编写总结

参考来源go-zero官方文档https://go-zero.dev/docs/tutorials 前言 go-zero是目前star最多的go语言微服务框架&#xff0c;api 是 go-zero特殊的语言&#xff0c;类型文件&#xff0c;go-zero自带的goctl可以通过.api文件生成http服务代码 api文件内容编写 不可使用关键字 …

Datawhale 组队学习之大模型理论基础 Task7 分布式训练

第8章 分布式训练 8.1 为什么分布式训练越来越流行 近年来&#xff0c;模型规模越来越大&#xff0c;对硬件&#xff08;算力、内存&#xff09;的发展提出要求。因为内存墙的存在&#xff0c;单一设持续提高芯片的集成越来越困难&#xff0c;难以跟上模型扩大的需求。 为了…