Nginx - 允许WebSocket连接代理

背景简介

前端使用 WebSocket 连接访问时报错，需配置允许 WebSocket 连接代理。

环境配置

1. 系统：Debian 6.1.66-1 (2023-12-09) x86_64 GNU/Linux

详细步骤

报错信息样例 

manager.js:75 WebSocket connection to 'wss://your_domain/c11n-messaging/ws?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJSU5YHLtEsqnQmYH2pxKfSYgoUe-YrCSk2-ziPZdk-ThpdYiidU3L1V8AjZFU5qf8QvArXLD3HSBeQbFujJdS2ApunDfQ' failed: 

第一步： 修改 nginx 配置，使其支持 WebSocket 连接

server {
        server_name your_domain;
        
        location / {
                proxy_pass http://127.0.0.1:30032;
                
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                proxy_set_header Host $host;

                # 如果需要，可以添加更多的代理设置
                ******

        }

    listen 443 ssl; 
    
    ******


}
server {
    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    }


        server_name your_domain;
        listen 80;
    	return 404;


}

• proxy_http_version 1.1;：指定代理使用 HTTP/1.1 版本。WebSocket 连接需要 HTTP/1.1 或更高版本，因为它依赖于一些特定的 HTTP/1.1 功能，如持久连接。
• proxy_set_header Upgrade $http_upgrade;：告诉代理服务器，客户端想要升级连接到 WebSocket 协议。变量 $http_upgrade 会被设置为客户端请求中的 Upgrade 头部的值，通常是 “websocket”。
• proxy_set_header Connection "upgrade";：这个头部告诉代理服务器，客户端想要改变协议，从 HTTP 升级到 WebSocket。

这三个配置共同作用，使得 Nginx 能够正确地处理 WebSocket 请求的 HTTP 升级握手，从而建立 WebSocket 连接。

第二步： 重启 Nginx 服务

• 查看配置是否正确

root@frp-server:~# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

• 重启

root@frp-server:~# systemctl restart nginx

以上便是本文的全部内容，感谢您的阅读。