当前位置：首页 > article >正文

【前端跨域】WebSocket如何实现跨域通信？原理、实践与安全指南

article 2025/3/20 12:50:17

在实时通信场景（如在线聊天、实时数据推送）中，WebSocket因其高效的双向通信能力成为首选技术

然而，当客户端与服务器部署在不同源时，跨域问题同样可能阻碍WebSocket的连接

一、WebSocket与跨域的关系

WebSocket的跨域限制

虽然WebSocket协议本身不受同源策略的直接限制，但浏览器在建立WebSocket连接时仍会校验跨域安全性：

客户端发起WebSocket连接时，浏览器会在握手请求的HTTP头中自动添加Origin字段（如Origin: https://client-domain.com）

服务器必须显式验证Origin字段，决定是否允许该跨域连接。

若服务器未做验证，恶意网站可能通过伪造Origin劫持WebSocket通信

与CORS的区别

CORS：针对HTTP请求，依赖服务器设置响应头（如Access-Control-Allow-Origin）

WebSocket：在HTTP握手阶段完成跨域验证，无需额外响应头，但需服务器主动检查Origin字段

二、WebSocket跨域的实现方式

服务器端验证Origin（核心步骤）

以Node.js的ws库为例，手动验证Origin字段：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket, request) => {
  const origin = request.headers.origin;
  const allowedOrigins = ['https://client-domain.com', 'https://trusted-site.com'];

  if (!allowedOrigins.includes(origin)) {
    socket.close(1008, 'Unauthorized origin'); // 拒绝非法来源
    return;
  }

  // 合法连接的处理逻辑
  socket.on('message', (message) => {
    console.log('Received:', message);
  });
});

Nginx反向代理（生产环境推荐）

通过Nginx代理隐藏跨域细节，使浏览器认为WebSocket服务与前端同源：

server {
  listen 80;
  server_name client-domain.com;

  location /ws {
    proxy_pass http://websocket-server:8080;
    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 Origin ""; # 可选：覆盖Origin头以简化服务器验证
  }
}

前端连接地址改为同源的ws://client-domain.com/ws，Nginx将请求转发至真实的WebSocket服务器。

前端代码示例

const socket = new WebSocket('wss://client-domain.com/ws');

socket.onopen = () => {
  console.log('WebSocket连接已建立');
  socket.send('Hello Server!');
};

socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

socket.onerror = (error) => {
  console.error('连接错误:', error);
};