前端连接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连接恢复正常。

相关推荐
雨落Liy2 天前
Nginx 从入门到进阶:反向代理、负载均衡与高性能实战指南
运维·nginx·负载均衡
Yyyy4822 天前
Nginx负载均衡集群实验步骤
运维·nginx·负载均衡
FPGA_Linuxer2 天前
FPGA 40 DAC线缆和光模块带光纤实现40G UDP差异
网络协议·fpga开发·udp
real 12 天前
传输层协议UDP
网络·网络协议·udp
qq_264220893 天前
Nginx优化与 SSL/TLS配置
运维·nginx
hsjkdhs3 天前
网络编程之UDP广播与粘包问题
网络·网络协议·udp
AD钙奶-lalala3 天前
SpringBoot实现WebSocket服务端
spring boot·后端·websocket
yzx9910133 天前
接口协议全解析:从HTTP到gRPC,如何选择适合你的通信方案?
网络·人工智能·网络协议·flask·pygame
matlab的学徒3 天前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
板鸭〈小号〉3 天前
UDP-Server(3)chat聊天室
网络·网络协议·udp