Safari与Firefox中_self跳转致fetch请求中断，如何保留请求？

针对Safari和Firefox中点击_self外部链接导致fetch请求中断的问题，除了阻止默认跳转再等待请求完成的方案外，有两种直接可行的方式：

1. 使用Fetch的keepalive选项 #

fetch API内置的keepalive参数，开启后浏览器会在页面卸载时持续保留该请求，无需等待请求完成即可正常跳转。

修改后的代码示例：

const handleLinkClick = useCallback(() => {
  fetch('https://rickandmortyapi.com/api', {
    method: 'POST',
    keepalive: true
  })
}, [])

return (
  <a
    href="https://www.google.com/"
    onClick={handleLinkClick}
  >
    link
  </a>
);

注意事项：

• 请求大小存在限制（通常不超过64KB），超出会触发报错；
• Safari 14.1+、Firefox 75+已支持该特性。

2. 使用navigator.sendBeacon() #

这是浏览器专为页面卸载场景设计的数据发送API，兼容性更好，且不会阻塞页面跳转流程。

修改后的代码示例：

const handleLinkClick = useCallback(() => {
  // sendBeacon仅支持特定请求体格式：FormData/Blob/字符串，无法自定义复杂请求头
  const data = new FormData();
  // 若需发送JSON数据，可转为Blob格式
  // const data = new Blob([JSON.stringify({ key: 'value' })], { type: 'application/json' });
  navigator.sendBeacon('https://rickandmortyapi.com/api', data);
}, [])

return (
  <a
    href="https://www.google.com/"
    onClick={handleLinkClick}
  >
    link
  </a>
);

注意事项：

• 仅支持POST请求，且无法自定义多数请求头（如Authorization）；
• 请求大小限制比keepalive更宽松；
• Safari 11+、Firefox 31+等所有现代浏览器均支持。

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