同源&跨域（jsonp原理 / jQuery 的 jsonp）

最新推荐文章于 2024-04-12 03:41:38 发布

原创最新推荐文章于 2024-04-12 03:41:38 发布 · 461 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jsonp #同源 #跨域 #JQuery

ajax 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了浏览器的同源策略及其对跨域访问的影响，探讨了多种跨域解决方案，包括利用顶级域名相同的特点实现跨域，以及通过JSONP解决跨域通讯问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 同源

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

2. 跨域

不同源则跨域。

3. 顶级域名相同时的跨域解决方案

① domain.name = 顶级域名（如example.com）

② document.domain + iframe

③ window.name + iframe

④ location.hash + iframe

⑤ window.postMessage()

4. jsonp：解决跨域通讯问题

JSON with Padding

jsonp：与ajax没有关系，需要前后端配合

前后端约定好，使用某个名称（如callback）来进行函数的调用。

前端传入函数名，后端接收函数名，并将数据拼接成函数参数的形式与函数名进行字符串拼接，返给前端，前端会解析成js，并执行函数。

1.script标签可跨域

2.后台响应的字符串到前端默认以js解析

3.双方约定参数名称

4.传入复杂数据json格式

spa（single page application）：单页面应用程序

① jsonp原理

利用script标签的src可以引用其他网站的资源，动态创建script标签和回调函数，传递给后台。

其本质是利用了标签具有可跨域的特性，由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

可跨域的标签：script、img等

<!--jsonp跨域通信原理-->

<script>

/*1.动态创建script标签*/

var script = document.createElement('script');

/*2.动态创建回调函数*/

var success = function (data) {

        console.log(data);

};

/*3.设置接口地址为script标签的src并且加上回调函数的名称*/

    script.src = 'http://api.study.com/01jsonp.php?callback=success';

/*4.追加到html文档当中*/

    document.body.appendChild(script);

</script>

② JQuery 的 jsonp

JQuery 的 ajax 方法，设置 dataType 为 jsonp，进行跨域请求。

$.ajax({

    type:'get',

    url:'http://api.study.com/01jsonp.php',

/*设置jsonp 进行跨域请求*/

    dataType:'jsonp',

    success: function (data) {

        console.log(data);

}

});