在实时通信场景（如在线聊天、实时数据推送）中，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);
};
三、安全性考量
严格校验Origin字段
避免使用通配符（如允许所有Origin），防止跨站WebSocket劫持（Cross-Site WebSocket Hijacking）。
使用WSS协议（WebSocket over TLS）
加密通信防止中间人攻击，同时现代浏览器要求安全上下文（HTTPS页面）中才能使用WebSocket。
身份验证与鉴权
在握手阶段传递Token（如URL参数wss://server.com/ws?token=xxx）。
使用Cookie时需设置SameSite和Secure属性。
四、优缺点
优点
- 原生支持双向实时通信，延迟低
- 绕过传统HTTP跨域限制，适用复杂场景
- 现代浏览器广泛兼容（IE10+）
缺点
- 需服务器主动验证Origin
- 长连接可能增加服务器资源消耗
- 需额外处理断线重连、心跳检测等逻辑
总结
WebSocket通过基于Origin字段的握手验证机制，是跨域实时通信
需要在服务器端严格校验来源，并结合反向代理、TLS加密等技术保障安全性
对于需要高频双向数据交换的应用（如在线协作、实时监控），WebSocket的跨域能力将成为关键优势