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

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

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

直连测试

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

js 复制代码
<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代理配置片段如下

shell 复制代码
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;
}

修改如下:

shell 复制代码
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配置

shell 复制代码
nginx -s reload

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

相关推荐
東雪蓮☆18 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx
AD钙奶-lalala20 小时前
HTTP response code 200 206 416详解
网络·网络协议·http
✎﹏赤子·墨筱晗♪21 小时前
基于Nginx实现反向代理、负载均衡与动静分离完整部署指南
运维·nginx·负载均衡
蒋星熠1 天前
WebSocket网络编程深度实践:从协议原理到生产级应用
网络·数据库·redis·python·websocket·网络协议·微服务
草履虫建模1 天前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
dreams_dream1 天前
标准 HTTP 状态码详解
网络·网络协议·http
游九尘1 天前
服务器都是用的iis, 前端部署后报跨域,不是用同一个服务器 是前端项目的服务器做Nginx转发,还是后端项目的服务器做Nginx转发?
服务器·前端·nginx
三坛海会大神5551 天前
nginx中配置https详解:配置SSL/TLS证书
nginx·https·ssl
网络之路Blog1 天前
【实战中提升自己完结篇】分支篇之分支之无线、内网安全与QOS部署(完结)
网络协议·安全·网络之路一天·华为华三数通基础·网络设备管理·华为华三二三层交换机对接
✎﹏赤子·墨筱晗♪1 天前
Nginx 配置 SSL/TLS 全指南:从安装到安全强化
nginx·安全·ssl