4种跨域方法介绍

1.jsonp

jsonp的实现方式其实很简单，ajax不允许我跨域访问，但是可以从外部引入js文件。所以需要后台将逻辑写在JS文件里，前端再通过script标签将其引入进文档在设置好对应的回调函数即可。

实例：

天猫jsonp跨域搜索（截取实现部分）

                //添加脚本部分

                var oScript = document.createElement("script")  // 定义脚本标签
                oScript.src = "https://suggest.taobao.com/sug?code=utf-8&q="+this.value+"&_ksTS=1490258855704_564&callback=tmallSearch.callback"  //传递参数并设置回调参数
                document.body.appendChild(oScript)  //向文档中添加脚本
                document.body.removeChild(oScript)  //脚本添加即执行，所以不删除的话会导致页面里大量的重复脚本

回调部分：

                callback: function(data){
                    data !== null ? this.success(data) : this.fail(data)  //
                  },

2.cors

出于安全性考虑，在ajax跨域时会请求失败。但是在服务器端的返回报头上添加一串参数即可允许前端进行跨域访问。

服务器端返回报头中设置字段"Access-Control-Allow-Origin" 值为

"*"
这串报头意思是允许指定前端通过ajax来请求文件，其值代表允许方域 * 代表允许任何人访问。

3.降域

通过修改文档domain值来实现降（至同一）域

这部分演示可以在本页面中一起动手实践

首先打开控制台（console）按F12→控制台/console

然后在光标处输入document.domain回车  //"write.blog.csdn.net"

我们刚才访问了本文档的域，值为引号内部分。

实验1：“提升”重新设置域

控制台中输入  document.domain = "aaa.write.blog.csdn.net"  //前部aaa为随意测试用，实验室可替换为任意内容

提示错误：NS_ERROR_DOM_BAD_DOCUMENT_DOMAIN: Illegal document.domain value

结论：不可以“提升”域

实验2：“新定义”域

控制台中输入 document.domain = "write.blog.csdn.net.aaa"

提示错误：NS_ERROR_DOM_BAD_DOCUMENT_DOMAIN: Illegal document.domain value  //事实上无论讲aaa添加在任意部分都是

实验3：降域

控制台中输入 document.domain = "blog.csdn.net"

提示："blog.csdn.net"  //设置成功，域从先前的"write.blog.csdn.net"修改为"blog.csdn.net"

这意味着什么呢？两个不同域的文件如"aaa.blog.csdn.net"与"bbb.blog.csdn.net"可以通过以上的办法“变成”同域"blog.csdn.net"然后就可以访问了

这种方法局限性也很明显，两个文件需要在相同主体内

4.postmessage

在HTML5中新增了postmessage方法，可以在各个frame之间相互通信

在dom结构中插入iframe页面

主页面JavaScript

        window.οnlοad=function(){
            window.frames[0].postMessage('你猜?',"*");
        }
        window.addEventListener('message',function(e){
            console.log(e.data)
        })

子页面JavaScript

        window.addEventListener('message',function(e){
                var response = e.data + '你猜我猜你猜不猜'
                window.parent.postMessage(response,'*');
            });

打开主页面控制台中可观察到打印值