Fastify-SSE部署Nginx后Server-Sent Events跨域请求失败问题

问题根源分析 #

你遇到的问题核心是SSE请求带自定义Authorization头时，浏览器会触发OPTIONS预检请求，而Nginx或Fastify的配置未正确处理这种场景，同时SSE本身需要特定的响应头来维持长连接，这些配置在本地环境不需要，但Nginx反向代理时必须明确设置。

具体修复步骤 #

1. 调整Fastify插件注册顺序 #

CORS插件需要在SSE插件之前注册，确保CORS钩子能覆盖SSE路由：

import fastifyCors from "@fastify/cors";
import FastifySSEPlugin from "fastify-sse-v2";

// 先注册CORS，再注册SSE
await this.instance.register(fastifyCors, { 
  origin: "https://your-frontend-domain.com", // 替换为实际前端域名，带自定义头时*不生效
  allowedHeaders: ["Authorization"], // 明确允许Authorization头
  methods: ["GET", "OPTIONS"] // 包含预检请求的OPTIONS方法
});
await this.instance.after();
await this.instance.register(FastifySSEPlugin, { logLevel: "debug" });

注意：当请求带自定义头（如Authorization）时，浏览器不允许CORS origin设为*，必须指定具体域名，否则预检请求会失败。

2. 配置Nginx支持SSE和跨域 #

在Nginx的server块中添加针对SSE路由的配置，确保转发时保留必要的头并禁用缓存：

location /transaction/events {
  # 跨域相关头
  add_header Access-Control-Allow-Origin https://your-frontend-domain.com;
  add_header Access-Control-Allow-Methods GET,OPTIONS;
  add_header Access-Control-Allow-Headers Authorization;
  
  # SSE长连接必需的配置
  add_header Cache-Control no-cache;
  add_header Connection keep-alive;
  add_header Transfer-Encoding chunked;
  
  # 禁用Nginx缓存和缓冲，避免SSE消息被积压
  proxy_cache off;
  proxy_buffering off;
  proxy_set_header Connection '';
  proxy_http_version 1.1;
  
  # 转发到你的Fastify服务地址
  proxy_pass http://localhost:3000; # 替换为实际Fastify端口
}

如果你的Nginx全局有CORS配置，需要确保这个location块的配置不会被覆盖，或者直接在全局配置中包含SSE所需的头。

3. 验证预检请求 #

用浏览器开发者工具的Network面板，查看OPTIONS请求的响应头：

• 必须包含Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Methods
• 响应状态码应为204或200

如果OPTIONS请求失败，优先检查Nginx和Fastify的CORS配置是否一致。

内容的提问来源于stack exchange，提问作者Tbaut