关于跨域处理方式

Posted 2020-08-19 Dear 丶Lord

 什么是跨域：

这里说的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页面成功收到了消息