如何绕过CORS限制在新打开的跨域窗口执行会话超时功能？

浏览器的同源策略是核心安全机制，无法直接绕过，但可以通过合法手段实现你的会话超时需求，以下是可行方案：

1. 用postMessage实现跨域通信 #

这是标准合规方案，只要目标页面能配合接收消息即可：

父窗口（localhost:4200）代码 #

在打开新窗口后，发送会话超时相关指令：

this.newChildWindow = window.open(url, "_blank", `width="${altScreen.availWidth}", height="${altScreen.availHeight}"`);

// 等待窗口加载完成后发消息（可根据实际调整延迟时间）
setTimeout(() => {
  this.newChildWindow.postMessage({
    type: 'SESSION_TIMEOUT',
    timeoutMs: 3600000 // 示例：1小时超时
  }, '*'); // 生产环境建议替换为目标URL的具体域名，限制消息接收范围
}, 1000);

目标窗口代码 #

添加消息监听，执行超时逻辑：

window.addEventListener('message', (event) => {
  // 生产环境务必验证event.origin，只接收可信域名的消息
  // if (event.origin !== 'http://localhost:4200') return;

  if (event.data.type === 'SESSION_TIMEOUT') {
    let timeoutTimer = setTimeout(() => {
      alert('会话已超时，请重新登录');
      window.location.href = '/login';
    }, event.data.timeoutMs);

    // 监听用户操作，重置超时计时器
    ['mousemove', 'keydown', 'click'].forEach(evtType => {
      window.addEventListener(evtType, () => {
        clearTimeout(timeoutTimer);
        timeoutTimer = setTimeout(() => {
          alert('会话已超时，请重新登录');
          window.location.href = '/login';
        }, event.data.timeoutMs);
      });
    });
  }
});

2. 若目标域名由你控制：直接解除同源限制 #

如果新打开的URL属于你的域名，有两种方式：

• 配置CORS响应头：在目标服务器添加Access-Control-Allow-Origin: http://localhost:4200（生产环境替换为实际域名），若需携带Cookie，再加Access-Control-Allow-Credentials: true。
• 统一主域名：如果两个域名同属一个主域（如a.yourdomain.com和b.yourdomain.com），在两个页面的脚本中都设置document.domain = 'yourdomain.com'，即可直接操作窗口对象。

3. 代理页面嵌入（仅适用于可控场景） #

如果目标域名不可控，但你需要注入逻辑，可以在自己域名下做一个代理页面，用iframe加载目标URL，然后在代理页面实现超时逻辑。注意：若目标URL设置了X-Frame-Options禁止嵌入，此方法无效。

代理页面示例（http://localhost:4200/proxy.html）：

<!DOCTYPE html>
<html>
<head>
  <style>iframe { width: 100%; height: 100vh; border: none; }</style>
</head>
<body>
  <iframe id="targetFrame" src="目标URL"></iframe>
  <script>
    // 会话超时逻辑
    const timeoutMs = 3600000;
    let timer = setTimeout(() => {
      alert('会话超时');
      window.location.href = '/login';
    }, timeoutMs);

    // 监听用户活动重置计时器（若需监听iframe内的活动，需要iframe页面配合postMessage）
    window.addEventListener('mousemove', resetTimer);
    window.addEventListener('keydown', resetTimer);

    function resetTimer() {
      clearTimeout(timer);
      timer = setTimeout(() => {
        alert('会话超时');
        window.location.href = '/login';
      }, timeoutMs);
    }
  </script>
</body>
</html>

父窗口打开代理页面：

this.newChildWindow = window.open('/proxy.html', "_blank", `width="${altScreen.availWidth}", height="${altScreen.availHeight}"`);

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