解决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
    },
  }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

020-信息打点-红蓝队自动化项目资产侦察企查产权武器库部署网络空间

020-信息打点-红蓝队自动化项目&资产侦察&企查产权&武器库部署&网络空间 #知识点: 1、工具项目-红蓝队&自动化部署 2、工具项目-自动化侦查收集提取 3、工具项目-综合&网络空间&信息 演示案例: ➢自动化-武器库部署-F8x ➢自…

MySQL数据库查询语句之组函数,子查询语句

组函数 以组为操作单位,一组数据得到一个结果。 在没有手动分组的前提下,整张表默认为一组数据 max(列名):获取最大值 min(列名):获取最小值 sum(列名):获取总和 avg(列名):获取平均值 count(列名)&a…

Operation

contents 服务器一、相关概念1.1 云服务器与实例1.2 关于域名解析延时与80端口1.3 关于备案1.4 关于SSL证书1.5 关于SSL证书的签发1.6 关于SSL证书的部署1.7 关于LNMP和LAMP1.8 关于bt面板 二、单服务器单一级域名多网站2.1 创建多个二级域名2.2 解析二级域名绑定到服务器上2.3…

夜视成像应用激光照明方法

在夜视成像领域,激光照明的使用主要集中在提高成像质量和远距离观察上。 以下是几种用于夜视成像的激光照明方法: 直接激光照明: 这种方法涉及直接用激光光束照射目标。激光器发出的光束可以是可见光或红外光,具体取决于应用需求和…

day01 深度学习介绍

目录 1.1深度学习介绍 1.2神经网络NN 1、概念: 2、神经元 3、(单层)神经网络 4、感知机(两层) 5、多层神经网络 6、激活函数 (1)饱和与非饱和激活函数 (2)饱和激活…

项目工时统计成本核算管理

技术架构: Java 1.8 MySQL 8 Vue 项目基于前后端分离架构,服务端主要技术:SpringBoot 前端主要是Vue。 项目介绍: 轻量级项目工时统计系统,是目前企业进行项工时管理统计的推荐选择。 通过项目工时管理系统,可通过…

Linux--文件链接

目录 1.建立软连接 2.建立硬链接 3.什么是软链接 Linux中软链接的应用场景 4.什么是硬链接 5.文件与目录的硬链接数 6.软链接与硬链接的区别 用户无法对目录建立硬链接,可以建立软连接。 在Linux中文件的链接有两种:1.软连接 2.硬链接 1.建立软…

Docker 配置 Gitea + Drone 搭建 CI/CD 平台

Docker 配置 Gitea Drone 搭建 CI/CD 平台 配置 Gitea 服务器来管理项目版本 本文的IP地址是为了方便理解随便打的,不要乱点 首先使用 docker 搭建 Gitea 服务器,用于管理代码版本,数据库选择mysql Gitea 服务器的 docker-compose.yml 配…

RK3568 移植Ubuntu

使用ubuntu-base构建根文件系统 1、到ubuntu官网获取 ubuntu-base-18.04.5-base-arm64.tar.gz Ubuntu Base 18.04.5 LTS (Bionic Beaver) 2、将获取的文件拷贝到ubuntu虚拟机,新建目录,并解压 mkdir ubuntu_rootfs sudo tar -xpf u

用flinkcdc debezium来捕获数据库的删除内容

我在用flinkcdc把数据从sqlserver写到doris 正常情况下sqlserver有删除数据,doris是能捕获到并很快同步删除的。 但是我现在情况是doris做为数仓,数据写到ods,ods的数据还会通过flink计算后写入dwd层,所以此时ods的数据是删除了…

SPN 泄露 | 扫描 | 维护

SPN 泄露 当Service Principal Names(SPNs)泄露时,可能会引发严重的安全风险,特别是在使用Kerberos身份验证的环境中。 身份欺骗(Identity Spoofing): 攻击者可以用泄露的SPN来伪装成合法的服…

芯驰E3340软件编译以及更新步骤

打开已有工程File->Open Solution: 东南项目:e3340\boards\e3_324_ref_display\proj\jetour-t1n-fl3\sf\SES 编译:build->build sf 增加头文件和宏定义: 编译完成sf后,进行编译bootloader 东南项目:e3340\boa…

Java Server-Sent Events通信

Server-Sent Events特点与优势 后端可以向前端发送信息,类似于websocket,但是websocket是双向通信,但是sse为单向通信,服务器只能向客户端发送文本信息,效率比websocket高。 单向通信:SSE只支持服务器到客…

go语言(十四)----反射

变量的结构 2 举个例子 package mainimport "fmt"type Reader interface {ReadBook() }type Writer interface {WriteBook() }//具体类型 type Book struct {}func (this *Book) ReadBook() {fmt.Println("Read a Book")}func (this *Book) WriteBook() {…

​《WebKit 技术内幕》学习之九(3): JavaScript引擎

3 JavaScriptCore引擎 3.1 原理 JavaScriptCore引擎是WebKit中的默认JavaScript引擎,也是苹果在开源WebKit项目之后,开源的另外一个重要的项目。同其他很多引擎一样,在刚开始的时候它的主要部分是一个基于抽象语法树的解释器,这…

天软特色因子看板 (2024.1 第8期)

该因子看板跟踪天软特色因子A04001(当日趋势强度,该因子为反映股价走势趋势强弱,用以刻画股价走势趋势强弱,abs(值)越接近1,趋势 性越强,符号代表涨跌方向。 今日为该因子跟踪第8期,跟踪其在SW801080 (申万…

什么是WAF

WAF是Web应用防火墙(Web Application Firewall)的简称,是一款通过执行一系列针对HTTP/HTTPS的安全策略来专门为Web应用提供保护的产品。 WAF主要用于防御Web应用攻击,例如SQL注入、跨站脚本攻击(XSS)、网页…

Java--接口

文章目录 主要内容一.teacher&student1.源代码代码如下(示例): 2.结果 二.shape1.源代码代码如下(示例): 2.结果 三.生物、动物、人1.源代码代码如下(示例): 2.结果 总结 主要内容 一.teacher&stu…

开源项目CuteSqlite开发笔记(八):Windows 64位/32位使用GetWindowLongPtr钩子函数

需求描述 在开发CuteSqlite的时候, 有一个功能需要实现,鼠标移到WTL::CStatic上后,发送消息通知CToolTipCtrl弹出。 遇到问题 WTL::CStatic控件没有相应 WM_MOUSEMOVE 消息,需要返回一个HTCLIENT消息来让窗口处理函数执行 WM_MO…

web3:B站chainlink课程第五课Wsl安装ubuntu虚拟机

坑了我好久。 https://learn.microsoft.com/zh-cn/windows/wsl/install-manual 按照微软给的这个手动安装的方式来,别想在线了,反正来看这个的肯定是直接 wsl --install成功不了的选手。 注意! 步骤6别从Microsoft Store 下载,…