当前位置：首页 > news >正文

前端连接websocket服务报错 Unexpected response code: 301

news 来源：原创 2025/5/25 9:52:20

前端连接websocket服务报错 Unexpected response code: 301

引
直连测试
301重定向
修改nginx配置

引

websocket后端服务正常，监听正常，可以通过简单的前端代码进行连接，但是通过nginx反向代理后报错Error during WebSocket handshake: Unexpected response code: 301

直连测试

假设我的webosocket服务tcp监听端口为8082，服务端ip为192.168.10.3，通过这个简单的js程序，用浏览器打开，查看控制台，网络中的ws，可以看到是能正常连接的，返回状态码为101.

<script>
// 创建一个 WebSocket 实例
const socket = new WebSocket('ws://192.168.10.3:8082/ws');// 当 WebSocket 打开时，输出信息
socket.addEventListener('open', function (event) {console.log('WebSocket 连接已打开');
});// 当接收到消息时，输出数据
socket.addEventListener('message', function (event) {console.log('收到消息:', event.data);
});// 当 WebSocket 关闭时，输出信息
socket.addEventListener('close', function (event) {console.log('WebSocket 连接已关闭');
});// 当遇到错误时，输出错误信息
socket.addEventListener('error', function (event) {console.error('WebSocket 出现错误');
});</script>

301重定向

301 是永久重定向状态码，通常发生在：

WebSocket 连接请求的 URL 缺少尾部斜杠
Nginx 配置中有重写规则导致 WebSocket 请求被重定向
WebSocket 连接尝试使用 HTTP 但服务器期望 HTTPS（或反之）

修改nginx配置

原关于websocket代理配置片段如下

location /ws/ {proxy_pass http://192.168.10.3:8082/ws;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;
}

修改如下：

location /ws {proxy_pass http://192.168.10.3:8082/ws;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;# 以下为 WebSocket 特定配置proxy_read_timeout 60s;proxy_redirect off;
}

重新加载nginx配置

nginx -s reload

前端页面重新加载后ws连接恢复正常。

前端连接websocket服务报错 Unexpected response code: 301

前端连接websocket服务报错 Unexpected response code: 301 引直连测试301重定向修改nginx配置引 websocket后端服务正常，监听正常，可以通过简单的前端代码进行连接，但是通过nginx反向代理后报错Error during WebSocket handshake: Unexpec…...

编程日记 2025/5/25 9:52:20

C语言(5)—操作符详解

文章目录一、操作符分类概览二、二进制与进制转换2.1 进制基本概念三、原码、反码与补码3.1 基本概念四、位操作符详解一、操作符分类概览 C语言中的操作符可以分为以下几大类： 算术操作符：, -, *, /, % 移位操作符：<<, >>…...

编程日记 2025/5/25 9:43:20

ubuntu新增磁盘挂载

1. 确认新磁盘使用 lsblk 命令查看系统中所有的块设备，找出新增的磁盘。 rootzzwl:~# lsblk NAME MAJ:MIN RM SIZE RO TYPE MOUNTPOINTS sda 8:0 0 60G 0 disk ├─sda1 8:1 0 …...

编程日记 2025/5/25 8:16:15

【计网】计算机网络的类别与性能

一、计算机网络的分类计算机网络可以根据不同的标准进行分类。下面是两种常见的分类方法： 1.按照网络的作用范围进行分类广域网 (WAN): 广域网覆盖的范围非常广泛，通常跨越城市、国家或甚至是全球。WAN主要用于连接地理位置相隔较远的计算机和网络设…...

编程日记 2025/5/25 9:24:23

Field访问对象int字段，对象访问int字段，通过openjdk17 C++源码看对象字段访问原理

在Java反射机制中，访问对象的int类型字段值（如field.getInt(object)）的底层实现涉及JVM对内存偏移量的计算与直接内存访问。本文通过分析OpenJDK 17源码，揭示这一过程的核心实现逻辑。一、字段偏移量计算 1. Java层初始化偏移量…...

编程日记 2025/5/25 8:43:46

香橙派打包qt文件报错“xcb 插件无法加载”与“QObject::moveToThread”线程错误的解决方案

PyQt 报错总结：打包文件过程，“xcb 插件无法加载”与“QObject::moveToThread”线程错误的解决方案全解析在使用 PyQt5 搭建图形界面时，打包文件的过程中出现的问题，真难绷，搞了半天。 Qt 平台插件 xcb 无法加载QOb…...

编程日记 2025/5/25 8:07:18

Flutter 学习之旅之 flutter 作为 module ，在 Android 的界面中嵌入Flutter界面功能的简单整理

Flutter 学习之旅之 flutter 作为 module ，在 Android 的界面中嵌入Flutter界面功能的简单整理目录 Flutter 学习之旅之 flutter 作为 module ，在 Android 的界面中嵌入Flutter界面功能的简单整理一、简单介绍二、在同一个布局中同时显示 Androi…...

编程日记 2025/5/25 9:00:39

在android 系统上qnn sdk转换，运行模型示例

前面讲了如何配置qnn sdk的环境，这一篇总结下qnn 实际转换一个onnx 模型，并运行的实现步骤。设备： 1. ubuntu22.04 的Linux 服务器。 2. 一台android手机。一、下载模型 from optimum.onnxruntime import ORTModelForSequenceClassifi…...

编程日记 2025/5/25 9:15:45

docker安装Canal1.1.5，MySQL5.7踩坑

docker安装Canal 前情提示安装MySQLdocker安装MySQL1. 拉取镜像2. 创建容器映射宿主机目录3. docker run 配置mysql重启mysql新建canal用户安装Canal创建docker网络安装Canal1.拉取canal镜像2.创建目录3.运行容器踩坑问题1 前情提示关于版本问题，官方也没有详细…...

编程日记 2025/5/25 9:47:07

SpringBoot 接口国际化i18n 多语言返回中英文切换全球化语言切换

介绍 Spring Boot通过MessageSource接口来实现国际化，它可以加载不同的消息资源文件，通常是.properties格式。通过定义不同的语言文件（例如：messages_en.properties、messages_zh.properties等），可以根据用…...

编程日记 2025/5/25 9:39:23

C++ 嵌套类（详解一站式讲解）

目录嵌套类嵌套类的定义嵌套类结构的访问权限 pimpl模式（了解） 嵌套类嵌套类的定义首先介绍两个概念： 类作用域（Class Scope） 类作用域是指在类定义内部的范围。在这个作用域内定义的成员（包括…...

编程日记 2025/5/24 0:00:54

EasyCVR视频汇聚平台助力大型生产监控项目摄像机选型与应用

一、方案背景在300路大型生产监控项目中，由于生产环境复杂多样，涵盖室外厂区、大型车间、室内办公区域等不同场景，单一类型的摄像机难以满足全方位、精细化的监控需求。EasyCVR作为一款功能强大的视频融合管理平台，具备灵活的视…...

编程日记 2025/5/25 8:46:57

解决leensa无法使用的办法：平替教程

Leensa已经完全连不上，并显示超时，至于之前有传言称他们会恢复服务也完全是无稽之谈。那么，Leensa停止服务后，广大的外贸人，设计人，留学生以及技术人学习，查资料以及开发客户该怎么办呢&#…...

编程日记 2025/5/25 9:14:15

算法思想之哈希表

欢迎拜访：雾里看山-CSDN博客本篇主题：算法思想之哈希表发布时间：2025.4.28 隶属专栏：算法目录算法介绍哈希表作用什么时候使用哈希表怎么使用哈希表例题两数之和题目链接题目描述算法思路代码实现判定是否互为字符重排题目链…...

编程日记 2025/5/25 8:16:15

springboot 视频分段加载在线播放

页面访问视频资源前端播放加载部分视频,每次选中一个时间点后往后加载一部分视频,主要用以节省网络传输的数据量通过ResourceHttpRequestHandler类实现，ResourceHttpRequestHandler支持分片加载，前端请求头中携带Range: bytes 0-10001，就…...

编程日记 2025/5/25 8:54:40

【题解-Acwing】868. 筛质数

题目：868. 筛质数题目描述给定一个正整数 n，请你求出 1∼n 中质数的个数。输入共一行，包含整数 n。输出共一行，包含一个整数，表示 1∼n 中质数的个数。数据范围 1 ≤ n ≤ 106 时空限制 0.2s / 64MB 输入样例 8输出样例 4代码 #include...

编程日记 2025/5/25 9:26:04

java 和 C#操作数据库对比

Java和C#在操作数据库方面有诸多相似之处，但也存在一些差异，以下从几个方面为你进行对比： 数据库连接 Java 在Java中，使用JDBC（Java Database Connectivity）来连接数据库。连接数据库的步骤通常包括加载…...

编程日记 2025/5/25 8:23:12

用 Python打造交互式图片-音视频管理器：代码分析与实践

在 Python 的 GUI 开发领域，wxPython 是一个功能强大且跨平台的框架，适合快速构建桌面应用程序。本文将深入分析一个基于 wxPython 的交互式图片管理器项目（SelectModelToPlayVideoAndAudio.py），该程序允许用户管理图片…...

编程日记 2025/5/25 9:45:14

Django 缓存框架

动态网站的一个基本权衡是它们是动态的。每当用户请求页面时，Web 服务器进行各种计算，从数据库查询到模板渲染到业务逻辑，以创建您网站访问者看到的页面。从处理开销的角度来看，这比标准的从文件系统中读取文件的服务器安排要昂贵…...

编程日记 2025/4/29 8:34:13

后缀数组~

子串：在字符串s中，取任意i<j,那么在s中截取从i到j的这一段就叫做s的一个子串。后缀：后缀就是从字符串的某个位置i到字符串末尾的子串，我们定义以s的第i个字符为第一个元素的后缀为suff(i)。 suff(1)就是从第一个字符到最后一个…...

编程日记 2025/5/25 7:58:20

Rust 学习笔记：编程练习（一）

Rust 学习笔记：编程练习（一） Rust 学习笔记：编程练习（一）Convert temperatures between Fahrenheit and CelsiusGenerate the nth Fibonacci numberPrint the lyrics to the Christmas carol “The Twelve …...

编程日记 2025/5/25 8:48:31

【基础知识】常见的计算公式(一)

目录标题定时器相关公式1. 定时器分频系数计算2. 定时器定时时间计算波特率相关公式1. 异步串行通信波特率计算 PWM 相关公式1. PWM 占空比计算不知道你们是不是和我一样,对定时器中的分频系数相关的计算公式,波特率计算公式等,都有点心生畏惧,其核心原因是不清楚不了解,没有…...

编程日记 2025/4/29 8:32:08

【AI生产力工具】Windsurf，一款AI编程工具

Windsurf 是 Codeium 公司推出的一款 AI 编程助手，它是一款集成深度上下文感知、多模型协作和实时代码管理的综合开发环境（IDE）。 Windsurf 作为 AI 编程工具的核心价值在于 “上下文感知 + 多模型协作 + 自动化工作流”，其深度集成的智能体系统（如 Flows 和 Cascade）正…...

编程日记 2025/5/18 2:46:16

【网络原理】TCP提升效率机制（三）：延时应答和捎带应答

目录一. 延时应答二. 捎带应答一. 延时应答延时应答也是基于滑动窗口的一种提升传输效率的方式（减少ACK数量） 接收方收到数据之后，不会立刻返回一个ACK确认报文，而是等一会再返回ACK报文这样做的好处？ 1&…...

编程日记 2025/4/29 8:32:05

Golang｜分布式索引架构

当文档数量巨大时，如一亿个文档，倒排索引难以全部放入单机内存。正排索引将热数据和冷数据分别存储在内存和磁盘中。分布式搜索引擎将数据分布在不同服务器上以应对大量数据。倒排索引的水平切分水平切分按关键词划分数据，如JAVA和算法在A服…...

编程日记 2025/4/29 8:32:04

【蓝桥杯省赛真题58】Scratch画台扇蓝桥杯scratch图形化编程中小学生蓝桥杯省赛真题讲解

目录 scratch画台扇一、题目要求编程实现二、案例分析 1、角色分析 2、背景分析 3、前期准备三、解题思路四、程序编写五、考点分析六、推荐资料 1、scratch资料 2、python资料 3、C资料 scratch画台扇第十五届青少年蓝桥杯scratch编程省赛真题解析一…...

编程日记 2025/5/18 10:58:43

WebRTC SDK是什么？

语音环境每年都在变，OKCC以前代理商的客群都是简单高效外呼为主，今年发现变化很大。很多代理商做的终端客户都是给其他业务系统赋能为主了。主流的还是以API对接为主，但是对接中发现webrtc SDK使用频率很高。那么什么是WebRTC SDK…...

编程日记 2025/5/25 9:22:56

反向代理、负载均衡与镜像流量：原理剖析、区别对比及 Nginx 配置实践

在现代网络架构中，反向代理、负载均衡和镜像流量是保障系统高效、稳定、安全运行的关键技术。虽然它们都涉及网络流量的管理与分发，但在功能、应用场景和实现方式上有着显著差异。本文将深入探讨三者的区别，并结合 Nginx 这一强大的开源服务器…...

编程日记 2025/5/25 8:23:12

PyCharm 2023升级2024 版本

windows下把老版本卸载之后，需要把环境变量，注册表信息删除。并且把C:\Users\用户\AppData 文件夹下的 Local\JetBrains和Roaming\JetBrains 都删除，再重新安装原旧项目升级的方式： 1.2023虚拟机的文件夹是venv 改为.venv…...

编程日记 2025/5/14 4:24:12

for(auto it: vec)和for(auto it: vec)的区别以及使用场景

目录 1.for(auto it: vec) 2.for(auto& it: vec) 3.总结在 C 里，for(auto it: vec) 和 for(auto& it: vec) 都属于基于范围的 for 循环，可用于遍历容器（像 std::vector、std::list 等）或者数组。不过，它们…...

编程日记 2025/4/29 8:28:45

系统思考提升培训效能

彼得德鲁克曾说：管理者的价值，不在于处理了多少事务，而在于创造了多少不可替代的成果。效率是以正确的方法做事，效能则是做正确的事。在系统思考中我们看到：效率往往是对单点问题的反应，而效能则是对整体系…...

编程日记 2025/4/29 8:28:44

第1篇：Egg.js框架入门与项目初始化

一、Egg.js框架优势与设计理念 1. 为什么选择Egg.js？ 作为基于Koa 2.x的渐进式企业级框架，Egg.js在阿里系大规模生产环境中验证成熟，具备以下核心优势： 约定优于配置通过app/config目录结构自动加载机制，减少冗余配置…...

编程日记 2025/5/22 9:48:19

CMU-15445(1)——环境搭建

前言最近在找完暑期实习之后，终于有了一些干项目外的空余时间学习新的知识，在这么多轮面试中，数据库的考察非常多，但孱弱的数据库基础导致我有很多次面试被问住，因此我希望在学习CMU-15445（Fall 2024&…...

编程日记 2025/5/18 10:34:15

Web基础与HTTP协议

目录一：Web基础 1.域名和dns 1.1域名的概念 （1）域名的结构 （2）域名结构类型 2.Hosts文件 （1）hosts文件的作用 （2）修改hosts文件 3.DNS 4.域名注册 &#xff0…...

编程日记 2025/4/29 8:26:35

数量关系7_行程问题

目录一、基础行程1. 基础行程2. 比例法运用3. 相遇追及二、特殊情境1. 多次相遇问题（简单）2. 流水问题3. 火车过桥4. 等距离平均速度问题（简单）5. 匀加速一、基础行程 1. 基础行程公式1：S = Vt 公式2：平均速度=(2 V1V2) / (V1+V2) 例题3（2023 广东）某地举办了“铁…...

编程日记 2025/5/21 2:57:15

MTK Android12-13 App卸载加锁

实现：App 卸载时候需要加一层拦截锁，客户输入密码后才能正常卸载文章目录参考资料：实现方案涉及到修改文件修改方案实现效果源码分析- 卸载方式一） 设置界面进行卸载InstalledAppDetailsAppInfoDashboardFragmentAppButtonsPre…...

编程日记 2025/4/29 8:26:33

文号验证-同时对两个输入框验证

文号验证-同时对两个输入框验证效果： 一、如果有多个文号： <div v-for"(item, index) in approvalForm.productApprovalTypeEvents" :key"index"> <el-form-itemlabel"文号":prop"productApprovalTypeEv…...

编程日记 2025/5/16 9:33:28

嵌入式面试八股文（十二）·FreeRTOS中·堆和栈

目录 1. 堆和栈 1.1 堆 1.2 栈 1.3 堆和栈的区别 1.3.1 分配方式 1.3.2 分配效率 1.3.3 生长方向 1.3.4 空间管理 1.3.5 存放内容 1. 堆和栈 1.1 堆堆是一块用于动态分配内存的区域，用于存储程序运行时动态创建的对象。堆的大小可以在程序运行…...

编程日记 2025/4/29 8:24:25

表的增删改查

目录 1、增删改查（CRUD） 2、新增（C） 3、查询（R） 3.1、全列查询 3.2、指定列查询 3.3、查询字段为表达式 3.4、别名 3.5、去重：distinct 3.6、查询时排序 1、增删改查（CRUD&…...

编程日记 2025/4/29 8:24:24

软考-软件设计师中级备考 4、数据结构

1、数据结构三要素要素定义分类特点逻辑结构数据元素之间的逻辑关系，是从具体问题抽象出来的数学模型，与数据存储无关1. 集合结构：数据元素同属一个集合，无其他特殊关系如一盒麦丽素豆子 2. 线性结构：元素存在一对…...

编程日记 2025/5/24 9:35:29

CMake提供了CMAKE_CXX_STANDARD用于设置C++的版本，比如可以通过如下方式设置使用C++23 set(CMAKE_CXX_STANDARD 23) 同时也提供了CMAKE_CXX_STANDARD_REQUIRED可以要求强制使用某个C++版本，比如： set(CMAKE_CXX_STANDARD_REQUIRED ON) 如果设置为 `ON`，那么 CMake 会要求编…...

编程日记 2025/5/25 9:11:39

【angular19】入门基础教程(一):项目的搭建与启动

angular现在发展的越来越能完善了，在vue和react的强势竞争下，它迎来了自己的巨大变革。项目工程化越来越好，也开始拥抱了vite这种高效的构建方式。所以，我们有必要来学习这么一个框架了。项目实现效果 nodejs环境 Node.js - v^…...

编程日记 2025/5/25 9:09:55

在使用Python的Selenium库打卡网页后，通过CDP命令获取所有cookies(包括Httponly和Secure的cookies)

通过 Chrome DevTools Protocol (CDP) 结合 Selenium 可以直接获取浏览器存储的所有 Cookies（包括所有域名下的 Cookies），以下是详细步骤： 步骤 1：配置 Chrome 启用 CDP启动 Chrome 浏览器时需启用远程调试端口&#…...

编程日记 2025/5/24 2:05:31

Deepseek-v3+cline+vscode java自动化编程

1、Deepseek DeepSeek 充值后，创建apikey 2、vscode Visual Studio Code - Code Editing. Redefined 3、下载插件cline 4、配置deepeseek-v3 的密钥到cline 5、不可用在开始的几次调用能正常使用起来，用了几次后，不能使用了，请求…...

编程日记 2025/4/29 8:23:18

5G育种技术之植物性状订制

行业展望我国农作物种业市场规模逐年增长，其中以粮食作物种子市场规模较大。目前我国育种产业发展仍处于初级阶段，存在龙头企业市场占有率和行业集中度不高、企业育种技术和水平落后于发达国家、种企研发投入不足等问题。虽然基因编辑技术的出现有望改…...

编程日记 2025/5/11 22:59:35

12前端项目----添加购物车1.0

商品添加购物车商品数量添加购物车浏览器本地存储localStoragesessionStorage添加成功页面商品数量输入为数字，最少为1<div class"cartWrap"><div class"controls"><input autocomplete"off" class"itxt&quo…...

编程日记 2025/4/29 8:22:06