safari,opera嵌入iframe页面cookie读取问题解决方法

使用 iframe 嵌入页面时，不同浏览器对 cookie 的处理方式有所不同，其中 Safari 和 Opera 会有 cookie 跨域问题，但这个问题可以通过添加响应的 HTTP 头来解决。

具体的解决方案如下：

方法一：设置相同的域名

将外层页面和嵌入的 iframe 页面设置相同的域名，这样就算是跨域请求，浏览器也会将 cookie 存储到相同的域名下，就能避免跨域问题。

示例一：外层页面和 iframe 页面设置同一个域名

<!-- index.html -->
<iframe src="http://example.com/iframe.html"></iframe>

<!-- iframe.html -->
<h1>Hello World!</h1>
<script>
  // 设置 cookie
  document.cookie = 'name=John';

  // 读取 cookie
  const cookies = document.cookie.split('; ');
  console.log(cookies); // ["name=John"]
</script>

方法二：设置响应头

在服务器端设置响应头，添加 Access-Control-Allow-Credentials 和 Access-Control-Allow-Origin，表示该 cookie 允许跨域访问。

示例二：服务器端设置响应头

// Node.js 服务器代码
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, {
    'Access-Control-Allow-Credentials': 'true',
    'Access-Control-Allow-Origin': 'http://example.com'
  });

  if (req.url === '/cookie') {
    // 设置 cookie
    res.setHeader('Set-Cookie', 'name=John');
    res.end();
  } else if (req.url === '/getCookie') {
    // 读取 cookie
    const cookies = req.headers.cookie;
    res.write(`Cookies: ${cookies}`);
    res.end();
  } else {
    res.write('Hello World!');
    res.end();
  }
});

server.listen(3000);

<!-- index.html -->
<iframe src="http://localhost:3000/cookie"></iframe>

<!-- iframe.html -->
<h1>Hello World!</h1>
<script>
  // 发送跨域请求
  fetch('http://localhost:3000/getCookie', { credentials: 'include' })
    .then(res => res.text())
    .then(text => console.log(text));
</script>

以上是关于 Safari 和 Opera 嵌入 iframe 页面 cookie 读取问题的两种解决方案和示例。可以根据具体的场景选择相应的方案进行解决。