iframe解决跨域ajax请求的方法

最新推荐文章于 2023-11-07 11:44:55 发布

老衲丶

最新推荐文章于 2023-11-07 11:44:55 发布

阅读量1.7k

点赞数

分类专栏：技术前端文章标签：跨域 jsonp iframe form

本文链接：https://blog.csdn.net/weixin_44481662/article/details/91846019

版权

本文详细介绍了如何利用iframe解决跨域ajax请求的问题，包括通过postMessage API和window.name的方式。首先，通过动态添加iframe，让iframe内的页面向同源服务器发起请求并传递数据回主页面。其次，讲解了如何利用window.name属性，通过多个页面间的交互完成数据传递。两种方法都涉及解析查询参数、发送ajax请求和处理返回数据的步骤。

摘要由CSDN通过智能技术生成

iframe跨域的基本前提是，一个页面可以嵌套非同源站点的html文件，以及某一个域名下的html页面可以通过脚本向同域名服务器发出ajax请求。当一个域名为domain1下的页面A想要向domain2发出ajax请求时，由于同源策略的限制无法直接请求到数据，但是可以在页面A中动态添加一个display设置为none的iframe，该iframe的src为domain2下的html页面B，由页面B来发出ajax请求，因为页面B是domain2下的所以可以成功发出请求。当B页面拿到数据之后再传递给A页面。

可以利用HTML5的postMessage来向A页面传递数据。
将通过一个demo来具体说明如何操作，该demo涉及到两个域名 http://localhost:3000 以及 http://127.0.0.1:3001。向 http://localhost:3000/a.html中嵌入 http://127.0.0.1:3001/b.html页面，在 http://127.0.0.1:3001/b.html发出本域名下的ajax请求。

先举一个简单的例子。

a.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<iframe src="http://127.0.0.1:3001/b.html"></iframe>
<script>
    window.addEventListener('message',e => {
      console.log(e.data);
    })
</script>
</body>
</html>

b.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
    $.ajax({
      url: 'http://127.0.0.1:3001/data.json'
    }).done(data => {
      window.parent.postMessage(data,'*');
    })
</script>
</body>
</html>

a页面中直接嵌入b页面，b页面加载后执行脚本，向同源服务器发出请求，拿到数据后发送给a页面。
这里强调一下：
1.代码中写的是window.parent而非window
2.代码中的第二个参数写为’*’，也可以指定精确的目标origin

当然实际开发中一个页面要发出很多个请求，并且根据用户操作不同可能要发出不一样的请求，