实现跨域的几种方法

• 同源： 协议相同、域名（主机名）相同、端口相同

  • 实现的跨域方法：

    • JSONP ：最常见的一种跨域方式，其背后原理就是利用了script标签不受同源策略的限制，在页面中动态插入了script，script标签的src属性就是后端api接口的地址，并且以get的方式将前端回调处理函数名称告诉后端，后端在响应请求时会将回调返还，并且将数据以参数的形式传递回去。

            // 前端
            //http://127.0.0.1:8888/jsonp.html
            var script = document.createElement('script');
            script.src = 'http://127.0.0.1:2333/jsonpHandler?callback=_callback'
            document.body.appendChild(script);      //插入script标签
            //回调处理函数 _callback
            var _callback = function(obj){
                for(key in obj){
                    console.log('key: ' + key +' value: ' + obj[key]);
                }
            }
    
            //后端
            //http://127.0.0.1:2333/jsonpHandler
            app.get('/jsonpHandler', (req,res) => {
            let callback = req.query.callback;
            let obj = {
                type : 'jsonp',
                name : 'weapon-x'
            };
            res.writeHead(200, {"Content-Type": "text/javascript"});
            res.end(callback + '(' + JSON.stringify(obj) + ')');
            })
    

      优点:JSONP的兼容性很好，在古老的浏览器中都可以运行。
      缺点：
          1.JSONP 只支持 GET 请求，不支持 POST 请求等其他类型的 HTTP 请求
          2.请求过程无法终止，导致弱网络下处理超时请求比较麻烦
          3.无法捕获服务端返回的异常信息
    

    • CORS :Cross-Origin Resource Sharing(跨域资源共享)是一种允许当前域（origin）的资源（比如html/js/web service）被其他域（origin）的脚本请求访问的机制。
      当使用XMLHttpRequest发送请求时，浏览器如果发现违反了同源策略就会自动加上一个请求头:origin,后端在接受到请求后确定响应后会在Response Headers中加入一个属性:Access-Control-Allow-Origin,值就是发起请求的源地址(http://127.0.0.1:8888)，浏览器得到响应会进行判断Access-Control-Allow-Origin的值是否和当前的地址相同，只有匹配成功后才进行响应处理。

            // 前端
            //http://127.0.0.1:8888/cors.html
            var xhr = new XMLHttpRequest();
            xhr.onload = function(data){
            var _data = JSON.parse(data.target.responseText)
            for(key in _data){
                console.log('key: ' + key +' value: ' + _data[key]);
            }
            };
            xhr.open('POST','http://127.0.0.1:2333/cors',true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send();
    
            //后端
            //http://127.0.0.1:2333/cors
            app.post('/cors',(req,res) => {
            if(req.headers.origin){
                res.writeHead(200,{
                "Content-Type": "text/html; charset=UTF-8",
                "Access-Control-Allow-Origin":'http://127.0.0.1:8888'
                });
                let people = {
                type : 'cors',
                name : 'weapon-x'
                }
                res.end(JSON.stringify(people));
            }
            })
    

      优点:
          1.CORS 支持所有类型的 HTTP 请求。
          2.开发者可以是使用普通的 XMLHttpRequest 发起请求和获取数据，比起 JSONP 有更好的错误处理
      缺点：兼容性不太好
    

    • 服务器跨域 ：在前后端分离的项目中可以借助服务器实现跨域，具体做法是：前端向本地服务器发送请求，本地服务器代替前端再向api服务器接口发送请求进行服务器间通信，本地服务器其实就是个中转站的角色，再将响应的数据返回给前端，下面用node.js做一个示例

            // 前端
            //http://127.0.0.1:8888/server
            var xhr = new XMLHttpRequest();
            xhr.onload = function(data){
            var _data = JSON.parse(data.target.responseText)
            for(key in _data){
                console.log('key: ' + key +' value: ' + _data[key]);
            }
            };
            xhr.open('POST','http://127.0.0.1:8888/feXhr',true);  //向本地服务器发送请求   
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send("url=http://127.0.0.1:2333/beXhr");    //以参数形式告知需要请求的后端接口
    
            //后端
            //http://127.0.0.1:8888/feXhr
            app.post('/feXhr',(req,res) => {
            let url  = req.body.url;
            superagent.get(url)           //使用superagent想api接口发送请求
                .end(function (err,docs) {
                    if(err){
                        console.log(err);
                        return
                    }
                    res.end(docs.res.text); //返回到前端
                })
            })
    
            //http://127.0.0.1:2333/beXhr
            app.get('/beXhr',(req,res) => {
            let obj = {
                type : 'superagent',
                name : 'weapon-x'
            };
            res.writeHead(200, {"Content-Type": "text/javascript"});
            res.end(JSON.stringify(obj));     //响应
            })
    

    • postmessage跨域： 在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。
      该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。使用postMessage实现跨域的话原理就类似于jsonp，动态插入iframe标签，再从iframe里面拿回数据，私认为用作跨页面通信更加适合

    • 修改document.domain跨子域:
      ​ 前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域，所以只能跨子域
      在根域范围内，允许把domain属性的值设置为它的上一级域。例如，在”aaa.xxx.com”域内，可以把domain设置为 “xxx.com” 但不能设置为 “xxx.org” 或者”com”。