iframe src 跨域

对于跨域的 iframe，浏览器会在请求头中添加一个 Origin 字段，表示请求的来源。服务器可以通过判断该字段来决定是否允许该请求。如果服务器认为该请求不被允许，则会返回一个包含 CORS 头信息的 HTTP 响应，告诉浏览器该请求被禁止。如果服务器认为该请求被允许，则会返回正常的 HTTP 响应，浏览器将根据响应的内容来显示 iframe 的内容。另外，如果跨域的 iframe 需要与父窗口进行通信，可以使用 postMessage API 来进行跨域通信。

相关问题

vue iframe src 跨域问题怎么解决

Vue中的iframe元素可以显示其他网站或页面的内容，但是由于浏览器的同源策略限制，当iframe元素的src属性指向跨域地址时，会出现跨域问题，无法展示页面内容。这时，可以通过以下方法解决：

1. 使用后端代理解决跨域问题。通过后端服务器向跨域地址发送请求，然后将响应返回给前端页面。在Vue中，可以使用axios等前端请求库向后端发送请求，并在后端设置跨域请求头，从而解决跨域问题。

2. 修改被嵌入页面的响应头。如果能够控制跨域地址的响应头，可以在其中添加Access-Control-Allow-Origin字段，并设置为允许访问的域名地址，从而允许该地址对应的域名访问被嵌入页面的内容。

3. 使用PostMessage进行跨域通信。PostMessage是浏览器提供的跨窗口通信API，可以在两个窗口之间进行通信。通过在Vue页面中嵌入iframe元素，并在iframe中添加监听事件，可以监听父窗口向iframe发送的PostMessage，并在Vue页面中处理响应。

以上三种方法都可以解决Vue iframe src的跨域问题，选择哪种方法取决于具体的业务需求和技术限制。

解决iframe src 跨域具体怎么实现呢

解决 iframe src 跨域问题，可以使用 postMessage API 实现跨文档通信。具体步骤如下：

1. 在 iframe 内部编写 JavaScript 代码，并定义一个消息发送函数，例如：

function sendMessage(msg) {
  // 向父窗口发送消息
  window.parent.postMessage(msg, '*');
}

2. 在父窗口中监听 message 事件，例如：

window.addEventListener('message', function(event) {
  // 接收来自 iframe 的消息
  var msg = event.data;
  // 处理消息
  // ...
});

3. 在 iframe 内部调用 sendMessage 函数发送消息，例如：

sendMessage('Hello, parent window!');

4. 在父窗口中处理消息，例如：

window.addEventListener('message', function(event) {
  // 判断消息来源是否是指定的 iframe
  if (event.source !== iframe.contentWindow) {
    return;
  }
  // 接收来自 iframe 的消息
  var msg = event.data;
  // 处理消息
  // ...
});

通过 postMessage API 实现跨文档通信，可以避免 iframe src 跨域问题，并且可以在不同域名的页面之间进行通信。需要注意的是，在发送消息时，需要指定接收消息的窗口，可以使用通配符 "*" 来指定所有窗口都可以接收消息，但这样会存在安全风险，建议尽可能地指定接收消息的窗口。