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

news2024/11/23 0:17:39

请先核对自己的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.coloradmin.cn/o/1406647.html

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

相关文章

数藏潮玩开启元宇宙新空间(定制开发)

元宇宙给我们带来了很多的可能性,对于一个品牌或者是平台来说,越早抓住数藏也就越早抓住了元宇宙的早起红利,就能在未来式这个超空间里面占住商机。 而数藏潮玩的想象空间是巨大的,所以能创造的生态也是无限大。在通过对数藏平台…

一文读懂:D3.js的前世今生,以及与echarts的对比

D3.js(Data-Driven Documents)是一种用于创建动态、交互式数据可视化的JavaScript库。它通过使用HTML、CSS和SVG等Web标准,将数据与文档结合,使得数据可以以一种直观和易于理解的方式进行呈现。D3.js的重要性在于它赋予了开发者更…

SSM:Spring + Spring MVC + MyBatis 的整合

SSM 前言整合 前言 在完成 Spring 、Spring MVC 与 MyBatis 基础知识的学习后,下面简单介绍 SSM 框架的整合使用。 整合 SSM,是 Java 开发中常用的一个 Web 框架组合,用于构建基于 Spring 和 MyBatis 的 Web 应用( Spring MVC …

桌面型物联网智能机器人设计(预告)

相关资料 桌面级群控机器人CoCube探索-2022--CSDN博客 视频: 能!有!多!酷!CoCube桌面级群控机器人 让我看看谁在SJTU里划水… 简要介绍 设计一个桌面型物联网智能机器人,以ESP32芯片为核心,配…

Spring Security 6 学习-1

什么是 Spring Security Spring Security文档 Spring Security中文文档 Spring Security 是 Spring 家族中的安全型开发框架,主要解决三大方面问题:认证(你是谁)、授权(你能干什么)、常见攻击保护&#xff…

vue项目中使用Element多个Form表单同时验证

一、项目需求 在项目中一个页面中需要实现多个Form表单,并在页面提交时需要对多个Form表单进行校验,多个表单都校验成功时才能提交。 二、实现效果 三、多个表单验证 注意项:多个form表单,每个表单上都设置单独的model和ref&am…

GPT4+Python近红外光谱数据分析及机器学习与深度学习建模

详情点击链接:GPT4Python近红外光谱数据分析及机器学习与深度学习建模 第一:GPT4入门基础 1、ChatGPT概述(GPT-1、GPT-2、GPT-3、GPT-3.5、GPT-4模型的演变) 2、ChatGPT对话初体验(注册与充值、购买方法&#xff09…

写Shell以交互方式变更Ubuntu的主机名

以下是一个简单的 Bash 脚本,用于以交互方式更改 Ubuntu 20 系统的主机名: 1#!/bin/bash 2 3# 提示用户输入新的主机名 4read -p "请输入新的系统名称(主机名): " new_hostname 5 6# 检查是否输入了新的主机名 7if [ -…

Parallels Desktop 18 for Mac(pd虚拟机) 激活版

Parallels Desktop 18是一款功能强大的虚拟机软件,可以在Mac操作系统上同时运行多种操作系统,包括Windows、Linux、Android等。该软件提供了多种高级功能,如支持DirectX 11游戏、3D图形和OpenGL应用程序,以及运行Windows和Mac应用…

OpenCV书签 #余弦相似度的原理与相似图片/相似文件搜索实验

1. 介绍 余弦相似度(Cosine Similarity),又称为余弦相似性,是通过计算两个向量的夹角余弦值来评估他们的相似度。余弦相似度仅仅与向量的指向方向相关,与向量的长度无关,它将向量根据坐标值绘制到向量空间…

网络协议与攻击模拟_07UDP协议

一、简单概念 1、UDP协议简介 UDP(用户数据报)协议,是传输层的协议。不需要建立连接,直接发送数据,不会重新排序,不需要确认。 2、UDP报文字段 源端口目的端口UDP长度UDP校验和 3、常见的UDP端口号 5…

Springboot+vue的医院后台管理系统(有报告),Javaee项目,springboot vue前后端分离项目

演示视频: Springbootvue的医院后台管理系统(有报告),Javaee项目,springboot vue前后端分离项目 项目介绍: 本文设计了一个基于Springbootvue的前后端分离的医院后台管理系统,采用M&#xff08…

Git的管理操作

目录 前言 认识工作区、暂存区、版本库 小结: 使用场景--1: git log: 查看.git文件: 使用场景--2: git status: git diff: 进行提交: 总结: 版本回退 退…

Overleaf(LaTeX文档在线编写平台)使用学习记录

一、LaTeX简概[1] LaTeX,是一种基于TEX的排版系统,是一种可以处理排版和渲染的标记语言。由美国计算机科学家莱斯利兰伯特在20世纪80年代初期开发,利用这种格式系统的处理,即使用户没有排版和程序设计的知识也可以充分发挥由TEX所…

服务器的异步通信——RabbitMQ

目录 一、同步通信 VS 异步通信 二、MQ——消息队列 RabbitMQ RabbitMQ安装 RabbitMQ的整体架构 常见消息模型 基本消息队列(BasicQueue) 工作消息队列(WorkQueue) 发布、订阅(Publish、Subscribe&#xff0…

【CANoe使用大全】——工程新建

文章目录 1、硬件连接2、通道配置2.1通道协议选择2.2映射通道配置2.3.波特率采样点配置 1、硬件连接 前提条件:软件、驱动均已经安装完成 硬件通过UBS接入电脑,Status状态灯为黄色闪烁状态说明硬件设备与电脑连接正常 2、通道配置 2.1通道协议选择 …

架构师的36项修炼-01大型架构演进之路

本课时的主题是大型互联网系统架构的演进之路,主要包含三部分内容。 第一部分是大型互联网系统的特点,分析大型互联网有哪些特点和挑战,它们是现在一些技术和架构方案产生的原因。 第二部分是系统处理能力提升的两种途径,提供了…

Elasticsearch:使用 Gemini、Langchain 和 Elasticsearch 进行问答

本教程演示如何使用 Gemini API创建 embeddings 并将其存储在 Elasticsearch 中。 我们将学习如何将 Gemini 连接到 Elasticsearch 中存储的私有数据,并使用 Langchian 构建问答功能。 准备 Elasticsearch 及 Kibana 如果你还没有安装好自己的 Elasticsearch 及 Ki…

C#winform上位机开发学习笔记6-串口助手的断帧功能添加

1.功能描述 按照设定时间对接收数据进行断帧(换行) 应用于需要接收完整数据包的场景,例如下位机发送一包数据为1秒,每100ms发送一组数据 大部分用于接收十六进制数据时 2.代码部分 步骤1:添加计时器,设置默认时间为500ms 步骤…

【多商户开源-BSD- Fecmall 电商平台】

关于Fecmall Fecmall 关于,Fecmall介绍 Fecbbc开源BSD多商户系统,真正开源,商用免费授权的多商户系统 Fecmall系统简介: 全称为Fancy ECommerce Shop, 着重于电商架构的研发优化,全新定义商城的架构体系&…