React异步操作后自定义协议URL(its:?)被拦截：需用户手势，如何解决？

原因分析 #

这确实是浏览器安全策略更新导致的。现代浏览器为防范恶意网站未经用户许可唤起本地程序，会严格校验操作的触发上下文：只有用户直接触发的同步操作（比如按钮点击的同步回调）才允许唤起自定义协议；而异步操作（Axios轮询、await/Promise回调）会脱离初始的用户点击事件链，浏览器会判定为非用户主动触发的操作，因此拦截协议唤起。

可行解决方案 #

将全流程纳入用户点击事件上下文 #

把支付轮询、保存、协议唤起的完整逻辑都放在初始按钮的点击回调内，用async/await保持事件链不中断，浏览器会认为整个流程都是用户主动触发的：

<button onClick={async () => {
  // 打开二维码支付界面
  openQRCodeModal();
  // 轮询支付状态
  let paymentSuccess = false;
  while (!paymentSuccess) {
    const response = await axios.get('/api/check-payment');
    paymentSuccess = response.data.isPaid;
    if (!paymentSuccess) {
      await new Promise(resolve => setTimeout(resolve, 1500));
    }
  }
  // 执行保存操作
  await saveAfterQR();
  // 触发自定义协议
  window.location.href = EncodeURL;
}}>
  支付并打印
</button>

用隐藏按钮模拟用户点击 #

提前创建一个隐藏的按钮，绑定协议唤起逻辑，在异步操作完成后模拟点击这个按钮（模拟用户主动交互）：

import { useRef, useEffect } from 'react';

function PaymentPrintButton() {
  const printTriggerRef = useRef(null);

  useEffect(() => {
    // 创建隐藏按钮
    const hiddenBtn = document.createElement('button');
    hiddenBtn.style.display = 'none';
    hiddenBtn.onclick = () => {
      window.location.href = EncodeURL;
    };
    document.body.appendChild(hiddenBtn);
    printTriggerRef.current = hiddenBtn;

    // 组件卸载时清理
    return () => document.body.removeChild(hiddenBtn);
  }, []);

  const handlePay = async () => {
    openQRCodeModal();
    // 轮询支付状态...
    await saveAfterQR();
    // 模拟用户点击隐藏按钮
    printTriggerRef.current.click();
  };

  return <button onClick={handlePay}>支付并打印</button>;
}

提前获取用户交互授权（备选） #

在初始用户点击时，先触发一次无实际操作的协议唤起（比如its:?dummy），让用户确认"是否允许打开程序"，后续异步操作后再触发真实协议时，浏览器可能会因为已有用户授权记录而允许唤起。但这个方法依赖浏览器的缓存策略，不一定能稳定生效。

补充说明 #

• 调试时断点能偶尔成功，是因为断点暂停会让浏览器重置交互上下文的判断逻辑，生产环境无法依赖这个现象。
• 直接按钮点击能正常工作，是因为该操作属于浏览器认可的"用户主动同步交互"，符合安全策略要求。

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