zoukankan      html  css  js  c++  java
  • 关于跨域处理方式

     什么是跨域:

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

    一、通过jsonp跨域

    首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。
    然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
    最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
    客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数,
    传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里.(动态执行回调函数)
    可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换的) .JSONP是一种脚本注入(Script Injection)行为,所以也有一定的安全隐患.

    注意,jquey是不支持post方式跨域的.
    为什么呢?
    虽然采用post +动态生成iframe是可以达到post跨域的目的,但这样做是一个比较极端的方式,不建议采用.
    也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的, 万不得已还是不要剑走偏锋..

    个人实例:

    $.ajax({
                    url: "http://192.168.2.193:8080/rqemp-crm/login/adminLogin.htm",
                    data: $("form").serialize(),
                    dataType:"jsonp",
                    jsonpCallback:"test",
                    type: "GET",
                    success:function(data) {
                        console.log(data)
                        //var Msg = JSON.parse(data);
                        //if (Msg.code == "S00") {
                        //    location.href = "/rqemp-crm/CRM/home/home.html";
                        //} else {
                        //    $(".loginTipsWrap").css("display", "block");
                        //    $(".loginTips").html("账号或者密码错误!")
                        //}
                    }
                });

    一定要在ajax中定义好jsonp回调函数的名字,例如用:jsonCllback:。。。设置。
    也可以不设置,系统会有默认名称。

    后台服务端需要注意的!!!!

    (但是后台返回数据的时候一定要带上这个回调函数的名字 test(.....)。包起来需要返回来的json数据。 这样在前端才能正确接收。)

    使用HTML5中新引进的window.postMessage方法来跨域传送数据

    window.postMessage(message,targetOrigin)  方法是html5新引进的特性,可以使用它来向其它的window对象发送消息,无论这个window对象是属于同源或不同源,目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

    调用postMessage方法的window对象是指要接收消息的那一个window对象,该方法的第一个参数message为要发送的消息,类型只能为字符串;第二个参数targetOrigin用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符 *  。

    需要接收消息的window对象,可是通过监听自身的message事件来获取传过来的消息,消息内容储存在该事件对象的data属性中。

    上面所说的向其他window对象发送消息,其实就是指一个页面有几个框架的那种情况,因为每一个框架都有一个window对象。在讨论第二种方法的时候,我们说过,不同域的框架间是可以获取到对方的window对象的,而且也可以使用window.postMessage这个方法。下面看一个简单的示例,有两个页面

    运行a页面可以看到b页面成功收到了消息

  • 相关阅读:
    超棒的jQuery矢量地图生成插件 JQVAMP
    签名一年过期 项目导入出现 红叉叉
    invalid commandline parameter: Files\Android\androidsdk\tools/emulatorarm.exe 错误
    线性布局 相对布局 参数
    触摸事件 按下 移动 弹起
    Activity service 通信
    android view的setVisibility方法值的意思
    TextView 支持 html 图片显示
    布局动态添加 相对布局
    存储数据 SharedPreferences
  • 原文地址:https://www.cnblogs.com/joesbell/p/6068802.html
Copyright © 2011-2022 走看看