简单使用方法

 <iframe
  // ref={iframeRef} 
  id="iframe"
  style={{
    width: 1000,
    height: 1000
  }}
  // className={styles.sign_iframe}
  src={src}
/>

一：服务器配置报错

控制台报错：

Refused to frame '...' because an ancestor violates the following Content Security Policy directive: "frame-ancestors

Refused to display '...' in a frame because it set 'X-Frame-Option' to 'sameorigin'

拒绝在帧中显示“url”，因为它将‘X-Frame-Option’设置为‘sameorigin’

百度一下

需要同源才能使用iframe打开，喊运维改下需打开链接的服务器配置参考网址： blog.csdn.net/qq_32808455…

结论：

#add_header Content-Security-Policy "frame-ancestors '*'";
add_header X-Frame-Options  deny;
add_header Content-Security-Policy "frame-ancestors https地址"

设置后即可正常打开。

二：Cookie设置问题

登录后使用cookie存储时，需要更改sameSite为none, sameSite为none时，secure必须设置为true，设置方法如下

Cookies.setItem('auth', data, {
2  path: '/', // 表示Cookie的作用路径，默认为整个网站根目录及其子目录
3  sameSite: 'none', // 允许Cookie在跨站请求中携带，但需要HTTPS环境
4  secure: true, // Cookie仅可通过HTTPS协议进行传输
5  domain: 'yourdomain.com' // 指定Cookie作用域为yourdomain.com及其所有子域名
6});

如图即设置成功

注意点：

如果iframe页面中有使用新开标签页会导致登录信息失效
必须在https环境

iframe使用分享

一：服务器配置报错

结论：

二：Cookie设置问题

注意点：