websocket跨域问题后端配置

### 解决WebSocket跨域问题的后端配置

对于WebSocket跨域问题，最推荐的方式是利用跨域资源共享（CORS）。当涉及到WebSocket时，浏览器会先发起HTTP请求来完成握手阶段，在这个过程中可以通过设置响应头`Access-Control-Allow-Origin`允许特定源访问资源[^3]。

如果采用Nginx作为反向代理服务器，则可以在其配置文件中加入如下指令实现对WebSocket的支持以及处理跨域：

http {
    ...
    upstream websocket_backend {
        server backend_server_address:port;
    }

    server {
        listen 80;

        location /ws/ {
            proxy_pass http://websocket_backend;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            
            # 设置允许来自任何域名的请求, 实际应用建议指定具体域名
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

            if ($request_method = 'OPTIONS') {
                return 204;
            }
        }
    }
}

上述配置不仅支持了WebSocket协议升级所需的头部信息传递，还增加了必要的CORS相关头部以便于前端能够成功建立WebSocket连接并发送携带凭证的信息给服务端验证身份[^2]。

另外一种方式是在编写应用程序逻辑的时候直接控制返回给客户端的响应头。例如在一个基于Node.js环境下的Express框架项目里，可以这样做：

const express = require('express');
const WebSocket = require('ws');

// 创建 Express 应用程序实例
let app = express();

// 启动 HTTP 服务器
let server = require('http').createServer(app);

// 初始化 WebSocket 服务器并与 HTTP 服务器绑定在一起工作
let wss = new WebSocket.Server({server});

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        
        // 发送消息回客户端
        ws.send(`Hello, you sent -> ${message}`);
    });

    // 当有新客户端连接上来之后立即推送一条欢迎语句过去
    ws.send('Welcome to the WebSocket Server!');
    
    // 主动关闭连接前触发此事件处理器函数执行清理操作
    ws.on('close', ()=>{
        console.log("client has disconnected.");
    });
});

app.use((req,res,next)=>{
    res.header('Access-Control-Allow-Origin','*'); // 允许所有来源的跨域请求
    res.header('Access-Control-Allow-Headers','Origin, X-Requested-With, Content-Type, Accept');
    next();
})

server.listen(8080,()=>{
    console.log('listening on *:8080');
});

这段代码片段展示了如何创建一个简单的WebSocket服务器，并且设置了适当的HTTP响应头以应对可能存在的跨域限制情况。需要注意的是这里的`'*'`代表接受所有的外部站点发起的跨域请求，在实际生产环境中应当替换为具体的可信URL地址列表。