Koa跨域Cookie设置问题：多前端场景下浏览器未存储Cookie排查

我来一步步拆解你的问题，这里有几个关键点需要理清：

1. 为什么localhost不同端口也算跨域？ #

浏览器的同源策略要求三个要素完全一致才属于同源：协议（http/https）、域名（localhost）、端口（3000/3001）。哪怕都是localhost，只要端口不一样，浏览器就会判定为跨域——这是浏览器的核心安全机制，目的是防止恶意网站窃取其他网站的用户敏感数据。

2. 多域名场景下浏览器不存储Cookie的核心原因及解决方案 #

你目前的配置在单localhost前端场景能工作，但扩展到多域名时失效，主要是CORS配置错误和Cookie属性不满足跨域要求导致的，具体如下：

问题1：CORS的origin: false配置不符合跨域凭证要求

当credentials: true时，浏览器要求Access-Control-Allow-Origin必须是具体的、与请求Origin完全匹配的域名，不能是*或者模糊的自动匹配配置。而你设置的origin: false在@koa/cors中，实际逻辑是尝试自动读取请求的Origin头返回，但这种自动逻辑在多域名场景下可能不稳定，甚至部分版本会返回*，直接触发浏览器的跨域安全限制，拒绝存储Cookie。

修正方案：维护一个允许的域名白名单，动态返回匹配的Origin：

const allowedOrigins = ['http://localhost:3001', 'http://app1.dev', 'http://app2.dev'];

app.use(cors({
  origin: (ctx) => {
    const requestOrigin = ctx.request.header.origin;
    // 检查请求Origin是否在白名单内
    if (allowedOrigins.includes(requestOrigin)) {
      return requestOrigin;
    }
    // 不在白名单内则拒绝，或根据需求返回默认值
    return false;
  },
  credentials: true,
  // 允许GraphQL请求必需的头字段
  allowHeaders: ['Content-Type', 'Authorization'],
  // 暴露Set-Cookie头，确保前端能正确识别Cookie响应
  exposeHeaders: ['Set-Cookie']
}));

问题2：Cookie的属性不满足跨域存储要求

跨域场景下，浏览器对Cookie的存储有严格的属性限制，你可能遗漏了以下关键配置：

• SameSite：跨域场景下必须设置为None（生产环境），同时要配合Secure属性（仅HTTPS环境有效）；开发环境HTTP下可以暂时设置为Lax（避免部分浏览器对HTTP下SameSite=None的兼容性限制）。
• Domain：如果你的多前端是同个父域名的子域名（比如app1.dev和app2.dev都属于.dev），可以设置domain: '.dev'让Cookie在子域名间共享；如果是完全不同的顶级域名，不要设置domain，每个域名会单独存储Cookie。
• Path：设置为'/'确保所有API路径都能访问到Cookie。

示例Cookie设置代码（在你的认证解析器中）：

ctx.cookies.set('auth-token', 你的认证令牌, {
  httpOnly: true, // 防止XSS攻击，禁止前端JS读取Cookie
  secure: process.env.NODE_ENV === 'production', // 生产环境开启HTTPS时必须设置
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax',
  maxAge: 24 * 60 * 60 * 1000, // Cookie有效期1天
  path: '/',
  domain: process.env.NODE_ENV === 'production' ? '.dev' : undefined // 开发环境无需设置domain
});

问题3：axios的withCredentials配置可能未生效

你提到开发者工具看不到credentials参数，大概率是axios实例的配置没正确生效：

• 确保在创建axios实例时直接设置withCredentials: true，而不是在单个请求中临时设置（避免被请求拦截器覆盖）。
• 检查请求拦截器是否意外修改了withCredentials属性。

正确的axios实例配置：

import axios from 'axios';

const graphqlClient = axios.create({
  baseURL: 'http://localhost:3000',
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 发起GraphQL请求的示例
const loginMutation = async (email, password) => {
  const response = await graphqlClient.post('/graphql', {
    query: `
      mutation Login($email: String!, $password: String!) {
        login(email: $email, password: $password) {
          token
        }
      }
    `,
    variables: { email, password },
  });
  return response.data;
};

最后验证步骤 #

修改配置后，打开浏览器开发者工具的Network面板，检查：

1. 请求头中是否包含Origin字段，值为当前前端域名。
2. 响应头中是否有Access-Control-Allow-Origin，值与请求Origin完全一致。
3. 响应头中是否有Access-Control-Allow-Credentials: true。
4. 响应头的Set-Cookie是否包含你设置的所有属性（SameSite、Secure等）。

如果这些都符合要求，浏览器就会正常存储跨域Cookie了。

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