React运行时持续弹出“Third-party cookie will be blocked”警告如何解决？

排查重复触发的操作逻辑 #

• 打开开发者工具的Network标签，筛选XHR/Fetch请求，查看是否存在每秒重复发起的跨域请求。这类重复请求通常是代码里setInterval未正确管理、循环逻辑错误，或者组件重复渲染导致的重复调用。
• 检查代码中是否有持续尝试设置第三方Cookie的逻辑（比如通过document.cookie调用或第三方库），每秒执行的这类操作会持续触发警告。

修复重复执行的代码 #

• 若定时器是问题根源，确保setInterval只在组件挂载时执行一次，并在卸载时清除：

  useEffect(() => {
    const interval = setInterval(() => {
      // 你的请求或操作逻辑
    }, 1000);
    return () => clearInterval(interval); // 组件卸载时清除定时器
  }, []);
  

• 若组件重复渲染导致重复请求，检查useEffect的依赖项数组是否合理，使用useCallback包裹请求函数，避免不必要的重复执行。

开发环境临时屏蔽警告 #

如果暂时无法定位根源，可在Chrome开发者工具中过滤该警告：

• 打开控制台，点击右上角的漏斗图标进入过滤设置
• 在过滤框输入-Third-party cookie will be blocked，即可屏蔽该警告内容

从根源消除警告（涉及自有跨域服务） #

如果警告来自你自己的跨域服务，调整服务端的Cookie设置：

• 为Cookie添加SameSite=None; Secure属性（仅适用于HTTPS环境），或根据业务场景设置为SameSite=Lax/SameSite=Strict，符合浏览器隐私规则，从根源解决警告问题。

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