zoukankan      html  css  js  c++  java
  • jsonp跨域总结

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

    跨域处理方法:

    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,对安全由一定威胁。

  • 相关阅读:
    SQL Azure (17) SQL Azure V12
    Microsoft Azure News(5) Azure新DV2系列虚拟机上线
    Azure Redis Cache (3) 在Windows 环境下使用Redis Benchmark
    Azure PowerShell (11) 使用自定义虚拟机镜像模板,创建Azure虚拟机并绑定公网IP(VIP)和内网IP(DIP)
    Windows Azure Virtual Machine (31) 迁移Azure虚拟机
    Windows Azure Web Site (16) Azure Web Site HTTPS
    Azure China (12) 域名备案问题
    一分钟快速入门openstack
    管理员必备的Linux系统监控工具
    Keepalived+Nginx实现高可用和双主节点负载均衡
  • 原文地址:https://www.cnblogs.com/yanze/p/7487608.html
Copyright © 2011-2022 走看看