API Gateway未接收到凭证问题排查求助

以下是针对你遇到的Cookie未传递到API网关问题的排查和解决步骤：

1. 适配环境调整Cookie的secure属性 #

secure: true要求Cookie只能在HTTPS连接下传递，如果本地开发用的是HTTP（比如http://localhost:3000），浏览器会直接拒绝保存该Cookie。

• 开发环境：将secure设置为仅生产环境启用：

  res.cookie('auth-token', token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      sameSite: 'none',
      expires: new Date(Date.now() + 1000 * 60 * 60 * 12),
  })
  

• 若需要本地用HTTPS启动Next.js，可运行命令：next dev --experimental-https。

2. 确保CORS的Origin完全匹配 #

后端CORS配置的origin必须和前端实际域名完全一致，包括协议（http/https）、域名、端口，不能有多余斜杠或拼写错误：

• 确认process.env.FRONTEND_URL的值和前端运行地址完全匹配，比如本地是http://localhost:3000，生产环境是https://your-frontend-domain.com。
• API网关和产品微服务的CORS配置要和授权服务保持一致，不能用*作为origin（因为credentials: true时origin不允许是通配符）。

3. 配置Cookie的domain属性（跨子域名场景） #

如果授权服务和API网关属于同一主域名下的子域名（比如auth.yourdomain.com和gateway.yourdomain.com），需要设置domain让Cookie在整个主域名下共享：

res.cookie('auth-token', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'none',
    domain: '.yourdomain.com', // 开头的点表示覆盖所有子域名
    expires: new Date(Date.now() + 1000 * 60 * 60 * 12),
})

本地开发时，若都是localhost，可设置domain: 'localhost'，或者不设置（部分浏览器会自动识别）。

4. 检查API网关的请求转发逻辑 #

如果API网关是用Express等框架实现的，要确保转发请求时保留Cookie头：
比如用http-proxy-middleware时，需配置proxyReqOptDecorator传递Cookie：

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use('/products', createProxyMiddleware({
  target: process.env.PRODUCT_SERVICE_URL,
  changeOrigin: true,
  proxyReqOptDecorator: (proxyReqOpts, req) => {
    // 把原请求的Cookie头传递给产品服务
    if (req.headers.cookie) {
      proxyReqOpts.headers.cookie = req.headers.cookie;
    }
    return proxyReqOpts;
  },
}));

5. 针对Next.js组件类型的特殊处理 #

• 客户端组件：确认fetch的credentials: "include"配置正确，这会让浏览器自动携带Cookie。
• 服务器组件：服务器组件运行在后端，没有浏览器的Cookie存储，需要手动从请求头获取Cookie并传递：

  import { cookies } from 'next/headers';
  
  async function fetchProducts() {
    const authToken = cookies().get('auth-token')?.value;
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}products/all`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        ...(authToken && { Cookie: `auth-token=${authToken}` }),
      },
    });
    return response.json();
  }
  

6. 浏览器开发者工具快速排查 #

• 打开DevTools的Application > Cookies，确认auth-token是否存在。
• 在Network标签下查看请求的Request Headers，检查是否包含Cookie: auth-token=xxx：
  • 若没有：说明浏览器未发送Cookie，回到步骤1-3检查Cookie属性和CORS配置。
  • 若有但网关未收到：检查网关的转发逻辑（步骤4）。

内容的提问来源于stack exchange，提问作者Gauss-Islas