微服务间GraphQL请求浏览器未生成Cookie问题排查

云原生阿岚

2026-6-20

问题分析与解决方案

核心原因

通过Gateway（4000端口）请求时浏览器不设置Cookie，主要源于两个关键问题：

GraphQL Mesh默认不会转发上游服务返回的Set-Cookie响应头，导致浏览器无法接收设置Cookie的指令
Auth服务的CORS配置未允许Gateway域名，且Cookie的SameSite属性为Strict，不符合跨端口（跨域）场景的浏览器安全策略

解决方案

1. 更新Auth服务的CORS配置

Auth服务当前仅允许http://localhost:3000的请求，需添加Gateway的域名http://localhost:4000：

// app.ts（Auth服务）
export const yoga = createYoga({
  // ...其他原有配置
  cors: {
    origin: ['http://localhost:3000', 'http://localhost:4000'], // 允许两个域名
    credentials: true,
    allowedHeaders: ['X-Custom-Header'],
    methods: ['POST']
  }
});

2. 配置GraphQL Mesh转发`Set-Cookie`响应头

在.meshrc.yaml的Auth源配置中，明确指定转发上游的Set-Cookie头到客户端：

# .meshrc.yaml
sources:
  - name: Auth
    handler:
      graphql:
        endpoint: http://localhost:3000/graphql
        responseHeaders:
          - Set-Cookie # 转发Set-Cookie头
plugins:
  - httpDetailsExtensions:
      if: "env.NODE_ENV === 'development'"
pollingInterval: 3600000
serve:
  playground: true
  hostname: 0.0.0.0
  cors:
    credentials: true
    origin: http://localhost:4000

3. 调整Cookie的`SameSite`属性

Strict模式会阻止跨端口场景下的Cookie设置，修改为Lax适配开发环境：

// session.ts
export function setCookie(ctx: GraphQLContext, name: TokenType, token: string, expires: string | number) {
  ctx.request.cookieStore?.set({
    name,
    sameSite: 'Lax' as CookieSameSite, // 修改为Lax模式
    secure: en(COOKIES_SECURE),
    domain: COOKIES_DOMAIN!,
    expires: new Date(Date.now() + ms(expires.toString())),
    value: token,
    httpOnly: en(COOKIES_HTTPONLY)
  });
}