Fetch、CORS、SSE 与 WebSocket：前端通信方案怎么选

前端通信选型先看方向和生命周期：普通接口是请求响应，SSE 是服务器持续推送，WebSocket 是双向消息。CORS 则是浏览器对跨源读取的安全约束，不是一种传输协议。

普通 Fetch 请求

const controller = new AbortController()
const timeout = setTimeout(() => controller.abort(), 5000)

try {
  const response = await fetch('/api/orders', {
    signal: controller.signal,
    headers: { Accept: 'application/json' }
  })

  if (!response.ok) throw new Error(`HTTP ${response.status}`)
  const orders = await response.json()
  console.log(orders)
} finally {
  clearTimeout(timeout)
}

fetch 只有网络失败等情况才会 Reject，HTTP 404 或 500 仍需检查 response.ok。

CORS 与预检

当页面来源和接口的协议、主机或端口不同，浏览器会检查服务端的 CORS 响应头。某些方法和请求头会先触发 OPTIONS 预检：

1
2
3

浏览器 -> OPTIONS 询问是否允许
服务器 -> 返回允许的 Origin、Method、Header
浏览器 -> 条件满足后发送真实请求

CORS 由服务端明确授权，不能通过前端添加一个请求头“关闭”。同源策略主要限制浏览器脚本，不会阻止服务器、curl 或恶意程序直接请求接口，因此接口仍要认证和授权。

SSE 适合服务器单向流

const events = new EventSource('/api/stream')

events.onmessage = (event) => {
  console.log(event.data)
}

events.onerror = () => {
  console.log('stream interrupted')
}

SSE 使用 text/event-stream，适合 AI 文本流、进度和通知。它是服务器到浏览器的单向通道，客户端仍通过普通 HTTP 发送问题或操作。

WebSocket 适合双向实时通信

const socket = new WebSocket('wss://example.com/ws')

socket.onopen = () => socket.send(JSON.stringify({ type: 'join', room: '42' }))
socket.onmessage = (event) => console.log(JSON.parse(event.data))

在线协作、实时游戏和双向控制更适合 WebSocket，但要自己设计消息格式、鉴权续期、心跳、重连、顺序和背压。

选型对比

场景	方案
CRUD 和文件接口	Fetch/HTTP
服务端持续输出文本	SSE
双向低延迟消息	WebSocket
低频状态刷新	轮询或条件请求

代理层要为长连接配置合理超时并关闭不合适的响应缓冲。客户端重连必须有退避，避免网络恢复时大量连接同时冲击服务端。