Jsonp解决跨域的原理及过程

最新推荐文章于 2024-08-12 09:48:39 发布

果子狸的大果果

最新推荐文章于 2024-08-12 09:48:39 发布

阅读量6.4k

点赞数 2

本文链接：https://blog.csdn.net/qq_40692753/article/details/85249428

版权

在了解什么是跨域之前，我们先来了解这样一个概念：同源策略。

浏览器有一个很重要的安全性限制，即为同源策略：不同域的客户端脚本在无明确授权的情况下不能读取对方资源。访问不同源的资源就是跨域。浏览器中的一个url一般包括以下部分，协议，域名，端口，这三个任何一个不同，都是跨域。

以下是Jsonp解决跨域：

根据浏览器同源策略，所谓同源就是协议、主机、端口号都相同时成为同源。a 域的js不能直接访问 b域名的信息，但是script 标签的src属性可以跨域引用文件，jsonp是请求之后后台包装好一段json，并且把数据放在一个callback函数，返回一个js文件，动态引入这个文件，下载完成js之后，会去调用这个callback通过这样访问数据。

为了实现跨域请求，可以通过script标签实现跨域请求，然后再服务端输出JSON数据并执行回调callback函数，从而解决跨域数据请求。jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

首先在客户端注册一个callback，然后把callback的名字传给服务器。此时，服务器先生成json数据，然后以javascript语法的方式，生成function，function名字就是传递上来I带参数jsonp。最后将json数据直接以入参的方式，放置function中，这样就生成js语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回javascript文档，此时数据作为参数，传入了客户端预先定义好的callback函数里。简单的说，就是利用script标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。

总结一下，json 是一种数据格式，jsonp 是一种数据调用的方式，带callback的json就是jsonp。

缺点：这种方式只支持get方式。

2、JQuery封装Jsonp

对于经常用jQuery的开发者来说，能注意到jQuery封装的$.ajax中有一个dataType属性，如果将该属性设置成dataType:"jsonp"，就能实现JSONP跨域了。需要了解的一点是，虽然jQuery将JSONP封装在$.ajax中，但是其本质与$.ajax不一样。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现JSONP</title>
</head>
<body>
    <div id="mydiv">
        <button id="btn">点击</button>
    </div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
 
            $.ajax({
                async : true,
                url : "https://api.douban.com/v2/book/search",
                type : "GET",
                dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
                jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
                jsonpCallback: 'handleResponse', //设置回调函数名
                data : {
                    q : "javascript", 
                    count : 1
                }, 
                success: function(response, status, xhr){
                    console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                    console.log(response);
                }
            });
        });
    });
</script>
</html>

附一个链接

https://blog.csdn.net/zhoucheng05_13/article/details/78694766