项目复盘：websocket不受跨域限制的原理

我也爱吃馄饨2025-03-29 16:49

主要还是因为：

1、WebSocket 是独立于 HTTP 的应用层协议，通过 HTTP 建立连接后，完全脱离 HTTP 语义约束。这意味着

不受 HTTP 同源策略限制
不需要预检请求
不依赖 CORS 头机制

2、建立连接时的握手请求仍使用 HTTP 格式，但具有特殊标记：

类似于下述代码，当浏览器发起 WebSocket 连接时，会自动将当前网页的源（协议+域名+端口）填入 Origin 请求头。内部实现了跨域

javascript 复制代码

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: https://client.example.com  // 关键跨域标识
Sec-WebSocket-Version: 13

注：虽然目前服务端不做白名单校验也能成功，但为了安全还是要做一下di~

服务端可以用下列代码进行验证以防恶意操作

javascript 复制代码

wss.on('connection', (ws, req) => {
// 进行白名单校验
  const allowedOrigins = ['https://myapp.com', 'https://admin.myapp.com'];
  if (!allowedOrigins.includes(req.headers.origin)) {
    ws.close(1008, 'Invalid origin'); // 关闭非法来源连接
    return;
  }
}