异步请求耗时过长导致浏览器拦截target="_blank"新标签页问题

浏览器弹窗拦截的核心判定规则是：新开标签页/窗口的行为必须由用户主动交互（如点击事件）同步触发。如果触发逻辑中存在耗时较长的异步等待（各浏览器阈值在1-3秒不等，Chrome通常为3秒左右），该行为就会被判定为非用户主动触发的恶意弹窗，直接被拦截。
你当前的实现是点击按钮后先等待接口返回token（生产环境耗时4-6秒），再触发表单提交新开标签页，完全命中拦截规则，所以会出现本地短耗时正常、生产环境被拦截的现象。

方案1：提前打开空白标签页（改造成本最低，兼容性最好） #

不需要调整后端逻辑，只需要调整前端代码执行顺序：用户点击的瞬间同步打开一个空白新标签页，等异步接口返回token后，再将表单提交到这个提前打开的标签页中，全程不会触发拦截。
改造后的redirect函数代码如下：

const redirect = async () => {
  // 点击事件同步执行打开空白页，这一步不会被拦截
  const authTab = window.open('about:blank', '_blank');
  // 先写入加载提示，避免用户看到空白页产生困惑
  authTab.document.write('<div style="padding: 40px; text-align: center; font-family: sans-serif;">正在生成访问凭证，请稍候...</div>');

  try {
    const response = await api.getToken();
    if (response.isOk) {
      const form = document.getElementById('tokenForm') as HTMLFormElement;
      // 将表单提交目标指向提前打开的标签页
      form.target = authTab.name;
      form.action = response.targetUrl ?? '';
      const tokenInput = document.getElementById('tokenResponse') as HTMLInputElement;
      tokenInput.value = response.token ?? '';
      form.submit();
    } else {
      // 接口返回异常时关闭提前打开的标签页，给用户提示
      authTab.close();
      alert('访问凭证生成失败，请重试');
    }
  } catch (e) {
    authTab.close();
    alert('网络异常，请稍后重试');
  }
};

注意：初始打开的地址必须用about:blank，如果初始地址是跨域地址，会因为同源策略限制，无法将表单提交目标指向该标签页，导致方案失效。

方案2：优化接口耗时+交互兜底 #

如果可以推动后端优化token生成逻辑，把接口耗时压缩到1秒以内，自然不会触发拦截。但如果业务逻辑确实无法缩短耗时，这个方案可靠性不足——不同浏览器、不同版本的拦截阈值没有统一标准，哪怕把耗时压到2秒，也可能在部分环境下被拦截。
可以配合交互优化：点击按钮后在当前页弹出明确的加载提示，告知用户需要等待数秒，降低用户的困惑，但本质上解决不了拦截问题。

方案3：调整交互逻辑，当前页跳转 #

如果业务允许，取消新开标签页的逻辑：点击按钮后在当前页展示加载状态，等token生成完成后直接在当前页提交表单跳转，完全不会涉及弹窗拦截问题，缺点是用户会离开当前站点，需要和产品确认是否符合业务预期。

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