React中iframe加载第三方站点遇CORS问题：无法携带Origin请求头

首先明确：iframe发起的常规GET请求不会自动携带Origin请求头，这是浏览器同源策略的规则决定的——Origin头仅在跨域非简单请求（如POST、PUT、带自定义头的请求）或部分特殊场景下才会自动添加，iframe加载页面的GET请求属于简单请求，不会触发Origin头的发送。你设置的referrerPolicy="origin"控制的是Referer头的发送内容，和Origin头完全无关，所以不会生效。

针对你的场景，给出以下可行解决路径：

1. 调整合作方的校验逻辑 #

最直接的方案是和合作方沟通，修改其校验规则：

• 改为校验Referer头：你已经设置了referrerPolicy="origin"，浏览器会向合作方发送格式为https://你的域名.com的Referer头，合作方可以通过这个字段验证请求来源。
• 同时支持Origin和Referer校验：兼容两种头的存在情况，覆盖不同场景的请求。

2. 手动通过XHR/fetch获取内容后注入iframe #

如果合作方无法修改校验逻辑，可以尝试先通过XHR或fetch发起请求（跨域fetch请求会自动携带Origin头），再将响应内容注入iframe。但这个方案有明显局限性：

• 合作方页面中的静态资源（如JS、CSS、图片）若为跨域资源，会触发同源策略限制，导致加载失败。
• 若合作方页面依赖Cookie会话，需设置credentials: 'include'，且对方CORS配置需允许携带凭证才能生效。

示例代码（仅供参考，需测试兼容性）：

const App = () => {
  const [iframeContent, setIframeContent] = useState('');

  function handleSubmit() {
    const token = "123";
    const uri = "https://example.com/?token=" + token;

    fetch(uri, {
      credentials: 'include', // 如需携带Cookie需开启
    })
    .then(res => res.text())
    .then(html => {
      setIframeContent(html);
    })
    .catch(err => console.error(err));
  }

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={handleSubmit}>Click</button>

        <iframe
          title="example iframe"
          width="100%"
          height="400"
          srcDoc={iframeContent}
        >
        </iframe>
      </header>
    </div>
  );
}

3. 排查SameSite Cookie的问题 #

Edge提示的Set-Cookie未设置SameSite，即使对方声称设置了SameSite=None，也要确认是否同时设置了Secure属性——Chrome/Edge从版本80开始，要求SameSite=None的Cookie必须配合Secure（仅通过HTTPS传输），否则浏览器会拒绝保存该Cookie。如果合作方的Cookie不符合这个规则，会导致会话验证失败，页面空白，这可能是Chrome/Edge加载失败的真正原因。

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