开启Include Cookies时Apollo GraphQL Server无响应问题

问题现象 #

• 开启「Include Cookies」选项时，GraphQL Server无响应，调用API返回错误：

{
  "name": "TypeError",
  "message": "Failed to fetch"
}

• 关闭「Include Cookies」选项时，服务运行正常

原因定位 #

代码中app.use(cors())使用默认配置，而跨域请求携带Cookie时，CORS需要额外配置允许凭证（credentials）并指定明确的允许源（origin），否则浏览器会因跨域安全策略拦截请求，导致上述错误。

解决方案 #

1. 修改CORS配置 #

更新Express的CORS中间件配置，添加凭证允许和明确的源地址（替换为你的前端实际访问地址，比如开发环境的http://localhost:3000）：

app.use(cors({
  origin: "http://localhost:3000", // 替换为前端实际地址
  credentials: true
}))

2. 避免Apollo Server CORS冲突 #

在Apollo Server挂载到Express时，禁用其自带的CORS配置，防止和Express的CORS设置冲突：

apolloServer.applyMiddleware({ app, cors: false })

关键说明 #

• 浏览器跨域规则要求：当请求携带Cookie等凭证时，服务器必须返回Access-Control-Allow-Credentials: true响应头，且Access-Control-Allow-Origin不能是通配符*，必须指定具体的源地址
• 前后端不在同一域名/端口下时，必须正确配置上述CORS参数，才能让带凭证的跨域请求正常通过

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