Apollo GraphQL解析器中设置HttpOnly Cookie未生效问题求助

1. 跨域配置缺失 #

如果前后端域名不一致，必须完成以下两项配置：

• 后端CORS配置（以Express为例）：

  const corsOptions = {
    origin: process.env.FRONTEND_URL, // 填你的前端地址，比如http://localhost:3000
    credentials: true, // 允许请求携带凭证
  };
  app.use(cors(corsOptions)); // 在Apollo Server启动前挂载CORS中间件
  

• 前端Apollo Client全局配置：
  创建Client时必须开启凭证携带：

  const client = new ApolloClient({
    uri: process.env.REACT_APP_GRAPHQL_URI,
    cache: new InMemoryCache(),
    credentials: 'include', // 关键：让请求自动携带Cookie
  });
  

2. Cookie的secure属性配置错误 #

本地开发用HTTP协议时，secure: true会导致浏览器拒绝保存Cookie——这个属性仅在HTTPS环境下生效。修改解析器中的Cookie配置：

context.res.cookie("token", token, {
  httpOnly: true,
  secure: process.env.NODE_ENV === 'production', // 仅生产环境开启secure
  maxAge: 30 * 60 * 1000, // 与JWT过期时间统一为30分钟（注意单位是毫秒）
  sameSite: 'lax', // 避免跨域Cookie拦截，根据需求选'lax'或'strict'
  path: '/', // 指定Cookie生效路径为全站，避免仅当前路径可用
});

3. 确认上下文res对象传递正常 #

你的上下文配置已经返回res，但要注意：如果是Express集成的Apollo Server，当前写法没问题；如果是Serverless等特殊环境，需要调整上下文获取req/res的方式，确保res是有效的响应对象。

4. 前端请求的凭证补充（可选） #

如果全局配置没生效，可在单个mutation请求中单独指定：

signIn({
  variables: { email, password },
  context: {
    fetchOptions: {
      credentials: 'include',
    },
  },
});

5. 浏览器端验证 #

打开浏览器开发者工具：

• 查看Network面板的登录请求响应头，确认是否存在Set-Cookie字段
• 查看Application面板的Cookies列表，确认Cookie是否被存储

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