首页技术正文

jsonp跨域总结

开发者甜雅技术 2022年11月21日

0 收藏 590 点赞 4,940 浏览 1267 个字

同源限制: 浏览器不允许一个域的脚本请求另一个域的文档，通俗来说，不允许访问不同协议、不同域名或不同端口的文档

跨域处理方法:

1.jsonp

前提: 浏览器虽然对ajax请求做出了限制，但script的链接没有限制，例如: <script src= ‘xxx’>,我们可以轻松地链接到另一个域的文件

原理:

首先在客户端创建一个回调函数，将回调函数的名称(例如callback)传给服务端;

服务端生成json数据data后，创建js文件，将callback(data)(data成了callback的参数)写入js文件；

客户端创建script文件，链接地址为此前生成的js文件地址；

解析script文件，返回的callback(data)即调用callback函数(前面已创建)，由此，我们获取了data，如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    </body>
    <script> //创建callback函数
        function callBack(data){
            console.log(data)
        }
    </script>
    <script> //客户端返回的文件
        callBack({content: 'xx'})
    </script>
</html>

实际应用的例子如下:

<script type="text/javascript">
var url = "http://localhost:8080/html5/jsonp_data11.js";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
function callbackFun(data)
{
    console.log(data.age);
    console.log(data.name);
}
</script>

也可以使用jquery

$.ajax({
        type:"post",
        url:"http://localhost:8080/html5/JsonServlet",
        dataType:'jsonp',
        jsonp:'mycallback',
       jsonpCallback:'callbackFun',
       success:function(data) {
             console.log(2222);
             console.log(data.age);
       }
  });

值得注意的是使用jsonp是一个前后端配合的过程，后台根据前端的请求也得做成相应调整，特别是使用jquery时，有时回调函数名是jsonp属性的值，有时候追加到

url后面。

优点: 很好地解决了同源策略的限制

缺点:

1.只能GET；

2.不会返回状态码；

3.安全性不佳，毕竟返回一段js，对安全由一定威胁。