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

相关推荐
程序小武2 小时前
网络请求的基本概念、原理及生活化解析
网络协议
甘露寺3 小时前
HTTP 请求体类型详解:选择最适合的数据提交格式
网络·网络协议·http
傻啦嘿哟3 小时前
长效住宅代理IP:反爬虫战场上的隐形盾牌
爬虫·网络协议·tcp/ip
果子⌂6 小时前
Docker-构建镜像并实现LNMP架构
mysql·nginx·docker·容器·架构·php
三体世界6 小时前
TCP传输控制层协议深入理解
linux·服务器·开发语言·网络·c++·网络协议·tcp/ip
LuDvei7 小时前
CH9121T电路及配置详解
服务器·嵌入式硬件·物联网·网络协议·tcp/ip·网络安全·信号处理
令狐掌门8 小时前
tcp长连接与短连接
网络·网络协议·tcp/ip
创小匠8 小时前
创客匠人洞察:AI 时代创始人 IP 打造如何突破效率与价值的平衡
人工智能·网络协议·tcp/ip
zhysunny9 小时前
WebSocket实战:实现实时聊天应用 - 双向通信技术详解
网络·websocket·网络协议
hrrrrb10 小时前
【TCP/IP】5. IP 协议
网络协议·tcp/ip·php