跨域的几种解决方法

浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权情况下，不能读写对方的资源。为了实现跨域获取数据有一下几种方法

1.JSONP

利用script标签可以引入其他域下的js特性，可实现跨域访问接口，需要后端的支持；实现跨域的整个过程：
1.定义数据处理函数_fun
2.创建script标签，src的地址执行后端接口，最后加个参数callback=_fun
3.服务端在收到请求后，解析参数，计算返还数据，输出 fun(data) 字符串。
4.fun(data)会放到script标签做为js执行。此时会调用fun函数，将data做为
前端JS

    $('.change').addEventListener('click',function() {
        var script = document.createElement('script')
        script.src = 'http://localhost:8080/getNews?callback=showNews'
      //创建script标签，把callback=showNews作为参数加进去
        document.head.appendChild(script)
        document.head.removeChild(script)
    })
   //后端收到请求处理后返回showNews(data)
    function showNews(news) {
        var html = ''
        for (var i = 0; i < news.length; i++) {
            html +='
' + news[i] + '
'
        }
        console.log(html)
        $('.news').innerHTML = html
    }
 function $(id) {
    return document.querySelector(id)
}

服务端要做个判断

var cb = req.query.callback;
    if (cb) {
        res.send(cb + '('+ JSON.stringify(data) +')')
    }else {
        res.send(data)
    }

2.CORS方法

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），发出XHLHttpRequest请求，实现AJAX跨域使用。实现方式：
当使用XHLHttpRequest发送请求时，该请求不符合同源策略，这是浏览器会给该请求添加一个请求头：Origin,后台进行处理，确定接收请求会在结果中加一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有浏览器会处理响应，就可以拿到响应数据，如果不包含Origin的值，就无法拿到数据。cors的表象和同源的ajax请求没啥区别，代码一样。
当前JS代码和ajax一样

var xhr = new XMLHttpRequest()
    xhr.onreadystate = function() {
        if (state === 4) {
            if (status === 200 || status === 304) {
                appendChildHtml(JSON.parse(xhr.responsetext))
            }
        }
        xhr.open('get','http://other.com/getNews',true)
        xhr.send()
    }

    function appendChildHtml(news) {
    }

其他域处理数据

router.get('/getNews',function(req,res){
    var news = []
    var data = []
    for (var i = 0; i < 3; i++) {
        var index = parseInt(Math.random()*news.length)
        data.push(news[index])
        news.splice(index,1)
    }
    res.header("Access-Control-Allow-Origin","http://example.com")
     //允许指定域访问
    res.header("Access-Control-Allow-Origin","*")
     //允许任意域访问
    res.send(data)
})

具体可参考
HTTP访问控制（CORS）

3.降域

操作iframe之类的访问其他域，可以用降域方法
一下a.html和b.html都降域处理后可以互相访问了
a.html