如何复现并修复React+GraphQL+Apollo应用的CORS跨域错误

一、在macOS家庭网络复现CORS错误的方法 #

要复现该跨域错误，核心是构造协议、域名、端口三者不完全一致的请求场景，具体操作如下：

• 本地模拟跨域环境：
  1. 启动前端项目到本地端口（如localhost:3000），保持API服务在23116端口运行。
  2. 修改前端Apollo客户端配置，将API地址指向https://example.domain.com:23116/graphql（或本地localhost:23116/graphql）。
  3. 访问localhost:3000触发API请求，打开浏览器控制台（Cmd+Opt+I），即可看到与用户反馈一致的Cross-Origin Request Blocked错误。
• 命令行验证CORS响应：
  执行curl命令模拟跨域请求，检查返回头是否包含正确的CORS字段：

  curl -H "Origin: https://example.domain.com" -v https://example.domain.com:23116/graphql
  

  若返回头无Access-Control-Allow-Origin，说明CORS配置未生效。
• 用hosts文件模拟生产域名：
  修改/etc/hosts，添加127.0.0.1 example.domain.com，前端用https://example.domain.com:3000访问，API用https://example.domain.com:23116，完全复刻生产环境的跨域场景。

二、彻底解决CORS跨域问题 #

针对API与前端域名相同但端口不同的场景，可从配置和架构两方面解决：

1. 精准配置CORS规则 #

当前app.use(cors())是宽松默认配置，在严格网络环境下易被拦截，建议明确指定允许的源和必要请求头：

export async function startApolloServer(app: Express) {
  await apolloServer.start()

  // 替换为你的前端实际域名（默认443端口无需指定）
  const allowedOrigin = 'https://example.domain.com'

  app.use(cors({
    origin: allowedOrigin,
    // 允许携带Authorization等自定义头
    allowedHeaders: ['Authorization', 'Content-Type'],
    // 声明GraphQL常用请求方法
    methods: ['GET', 'POST', 'OPTIONS'],
    // 若需携带Cookie等凭证，开启此项
    credentials: true
  }))

  app.use(
    apolloEndpoint,
    json(),
    expressMiddleware(apolloServer, {
      context({ req }): Promise<GQLContext> {
        return GQLContext.fromUserOrTeacherToken(req.headers.authorization)
      }
    })
  )
}

也可直接在Apollo的expressMiddleware中配置CORS，避免全局中间件冲突：

expressMiddleware(apolloServer, {
  context({ req }): Promise<GQLContext> {
    return GQLContext.fromUserOrTeacherToken(req.headers.authorization)
  },
  cors: {
    origin: 'https://example.domain.com',
    allowedHeaders: ['Authorization', 'Content-Type'],
    methods: ['GET', 'POST', 'OPTIONS'],
    credentials: true
  }
})

2. 架构层面消除跨域（最优解） #

跨域根源是端口不同，最彻底的方式是让前端与API使用同一端口，通过反向代理转发请求。以Nginx为例：

server {
  listen 443 ssl;
  server_name example.domain.com;

  # 前端静态资源路径
  location / {
    root /path/to/frontend/build;
    try_files $uri $uri/ /index.html;
  }

  # 转发GraphQL请求到API服务
  location /graphql {
    proxy_pass https://localhost:23116/graphql;
    # 传递关键请求头
    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 X-Forwarded-Proto $scheme;
  }
}

配置后，前端请求https://example.domain.com/graphql会由Nginx转发到23116端口，浏览器判定为同源请求，彻底规避CORS问题。

3. 排查网络拦截因素 #

严格网络环境下，防火墙或代理可能拦截非标准端口（23116）的HTTPS请求：

• 检查API服务器防火墙，确保23116端口对外开放。
• 若用户使用企业代理，建议将example.domain.com:23116加入代理白名单。

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