fetch请求返回Set-Cookie头但浏览器未成功设置Cookie问题排查

你遇到的问题核心原因是前后端属于跨域部署场景，credentials: 'same-origin' 配置仅在前后端协议、域名、端口完全一致的同源场景下生效，跨域场景下该配置不会触发浏览器存储跨域接口返回的Cookie，这也是你配置后没有效果的根本原因。
按照以下步骤修改即可解决：

• 第一步：修改后端CORS配置
  跨域携带凭证场景下，禁止使用通配符*作为允许的请求源，需要明确指定前端页面的实际访问地址作为Access-Control-Allow-Origin响应头的值，同时开启跨域凭证允许配置。
  如果你使用Express官方cors中间件，参考配置如下：

  const cors = require('cors');
  // 替换为你前端的实际访问地址，例如本地开发为http://localhost:5173，线上环境为你的正式业务域名
  const ALLOW_ORIGIN = 'http://你的前端实际访问地址';
  app.use(cors({
    origin: ALLOW_ORIGIN,
    credentials: true
  }));
  

• 第二步：修改前端请求配置
  跨域场景下需要将fetch的credentials字段从same-origin改为include，修改后的登录请求代码如下：

  async login(email, password) {
          let response = await fetch(apiURL + '/login', {
              'method' : 'POST',
              'headers' : {
                  'Content-Type' : 'application/json',
                  'Accept' : 'application/json'
              },
              'credentials' : 'include',
              'body' : JSON.stringify({
                  'email' : email,
                  'password' : password
              })
          });
  
          return await response.json();
      }
  

• 第三步：补全Cookie必要属性
  Chrome 80及以上版本对跨域Cookie有强制校验规则，你需要在设置Cookie时补充sameSite和secure属性，否则浏览器会默认拦截跨域Cookie写入，修改后端Cookie设置代码如下：

  res.cookie('token', result, {
      'maxAge': 3600 * 1000,
      'sameSite': 'none',
      // 本地HTTP开发环境设为false，线上HTTPS环境必须设为true
      'secure': process.env.NODE_ENV === 'production' ? true : false
  });
  

验证要点 #

修改完成后重启后端服务，重新发起登录请求，在开发者工具中确认以下响应头配置正确：

• Access-Control-Allow-Origin值为你配置的前端明确地址，不是通配符*
• Access-Control-Allow-Credentials值为true
• Set-Cookie头中包含正确的SameSite=None和对应环境的Secure属性

注意：读取document.cookie时必须在你的前端业务页面域名下执行，在空白页或其他域名页面下无法读取到对应域名下的Cookie。

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