旧款iPhone Safari登录后跳转失效问题求助

问题场景：仅在iPhone 11、12、13及SE机型的Safari浏览器中出现，多域名结构（auth.example.com、user.example.com、admin.example.com）下，已打开user/admin标签页时，从auth登录后后台已执行跳转但页面仍显示登录界面，单标签页正常，Chrome/Firefox无此问题，技术栈为React+Node.js+瑞典BankID登录系统。

1. 强制绕过Safari页面缓存 #

旧版Safari对跨域页面的缓存机制可能导致加载旧的未登录状态页面，跳转时添加时间戳参数强制刷新：

if(config.userUrl.includes(url)){
  Cookie.set("user", JSON.stringify(data), {
    domain: '.example.com',
    secure: true,
    sameSite: 'None',
    path: '/'
  });
  // 添加时间戳避免缓存
  const freshUrl = `${url}?t=${Date.now()}`;
  window.location.replace(freshUrl);
}

2. 修正跨域Cookie配置 #

确保Cookie能被所有子域名正确读取，检查并调整以下参数：

• domain必须设置为.example.com（带前置点），确保所有子域名共享
• 跨域场景下sameSite必须设为'None'，同时配合secure: true
• 明确path: '/'避免默认路径限制

调整后的Cookie设置代码：

Cookie.set("user", JSON.stringify(data), {
  domain: '.example.com',
  secure: true,
  sameSite: 'None',
  path: '/'
});

3. 用postMessage通知目标标签页主动刷新 #

利用浏览器跨标签页消息机制，在auth页面登录成功后通知已打开的user/admin页面刷新：

在auth.example.com登录成功后发送消息 #

// 登录逻辑完成后
window.postMessage(
  { type: 'LOGIN_SUCCESS' },
  'https://*.example.com' // 限制消息接收域
);

在user.example.com/admin.example.com监听消息并刷新 #

// React组件中添加监听
useEffect(() => {
  const handleLoginMessage = (event) => {
    // 验证消息来源
    if (!event.origin.includes('example.com')) return;
    if (event.data.type === 'LOGIN_SUCCESS') {
      // 强制从服务器加载最新页面
      window.location.reload(true);
    }
  };

  window.addEventListener('message', handleLoginMessage);
  return () => window.removeEventListener('message', handleLoginMessage);
}, []);

4. 确保Cookie完全写入后再跳转 #

旧版Safari的Cookie写入可能存在延迟，可延长等待时间或使用库的回调（如果支持）：

Cookie.set("user", JSON.stringify(data), {
  domain: '.example.com',
  secure: true,
  sameSite: 'None',
  path: '/'
}, () => {
  // 如果Cookie库支持写入完成回调，在此执行跳转
  window.location.replace(`${url}?t=${Date.now()}`);
});

// 若无回调，延长超时时间
// setTimeout(() => {
//   window.location.replace(`${url}?t=${Date.now()}`);
// }, 500);

5. 强制激活目标标签页 #

BankID弹窗可能导致标签页失去焦点，跳转后强制激活页面：

const freshUrl = `${url}?t=${Date.now()}`;
window.location.replace(freshUrl);
setTimeout(() => {
  window.focus();
}, 300);

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