人生就像一列开往坟墓的列车，路途上会有很多站，很难有人至始至终陪你走完全程，当陪你的人要下车时，即便不舍，也要心存感激，然后挥手告别。---sunnyhuang

跨域

跨域一般有下列四种情况

1. jsonp
2. cors
3. 降域
4. postMessage

本篇文章将分别讲述这四个点，以实现原生js的跨域请求数据

>>>什么是跨域

要理解什么是跨域，首先要明白什么是同源策略。同源策略是指在相同域名下（同协议，同域名，同端口）网页之间可以通过数据接口进行数据的传递。但是如果不同源下，就不能通过数据接口进行数据传递。Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准。

现实例子

当你正在逛淘宝买东西的时候，突然心血来潮，想看看支付宝中你还有多少钱可以用，这2个页面很明显是在不同源的情况下，如果浏览器允许你进行访问，那将是多么可怕的事情？你可以通过相应的数据得到其他用户的支付宝信息，调用他的钱。

但是有时候我们有需要不同源下可以进行数据的交互，例如我想做一个音乐播放器，我想得到音乐的数据，我不可能要自己把数据全部都写一遍，如果这个时候百度统一我可以用他们的音乐数据，那我就只需要跨域进行接受，这样就方便的得到数据了

>>>小知识拓展

在处理数据的时候可能会用到JSON的2个方法来处理数据

1. JSON.parse() 把传入的参数转换成json对象或值
2. JSON.stringify() 把传入的参数转换成字符串

>>>jsonp实现跨域

jsonp(json with padding):当异步请求是，服务器端不直接的返回数据，而是返回一个js方法，然后把数据以参数的形式传递进去，就像被包裹（padding）起来。
jsonp的原理：我们都知道web页面再加载js的时候不受是否跨域的影响（不仅如此，只有要src属性调用数据的都不会受影响<script>,<iframe>,<img>）。想想你在你的网页中通过<script>引入百度api中的jquery时，它是不是直接可以让你访问接口了？所以利用这点jsonp就成功的实现了跨域。
jsonp：用户创建一个script，并且设置它的src属性值为对应的接口和传递给服务器的callback参数（script.src='接口地址+callback'=...）给服务端，然后服务端把这个callback的值作为函数名，把包裹的json数据作为参数，返回给浏览器，这样就可以实现随意定制自己的函数来自动处理返回的数据了。上述讲解你可能听到有一点模糊，下面我们一起来进入实战中。

本地模拟实践jsonp

1. 首先配置自己本地的host文件，不知道怎么配置的东西可以参考链接地址
   我的本地配置hosts,相当于我可以通过localhost和a.hcc.com以b.hcc.com来访问本机ip，从而找到我自己在本地开通的服务器，最后访问里面的资源文件。
   
   hosts配置
2. 开通本地服务器，这里以server-mock为例模拟服务器server-mock用法地址
3. 假设在同源的情况下获取数据

<div class="container">
<h1>jsonp使用说明</h1>
<div class="message"></div>
<button type="button" class="btn">获取数据</button>
</div>

<script>
    var btn=document.querySelector(".btn")
    var message=document.querySelector(".message")
    btn.addEventListener('click',function () {
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                    showMessage(JSON.parse(xhr.responseText));
            }
        }
        xhr.open('get',"/hcc",true)
        xhr.send();
    })
    function showMessage(data){
        for(var i=0;i<data.length;i++){
            message.innerHTML+=data[i]+'<br>';
        }
    }
</script>

同源得到数据

跨域无法获得数据

1. 我们创建了一个script标签，把它的src值设置为我们需要访问的接口。
2. 在src属性值后加一个回调函数，callback的值等于我们页面中已经定义好了的函数名
3. script添加到head中实现加载

var btn=document.querySelector(".btn")
var message=document.querySelector(".message")
btn.addEventListener('click',function() {
    var script=document.createElement('script');
    script.src="http://a.hcc.com:8080/hcc?callback=showMessage";
    document.head.appendChild(script);
    document.head.removeChild(script);
})

function showMessage(data){
    for(var i=0;i<data.length;i++){
        message.innerHTML+=data[i]+'<br>';
    }
}
//后台代码
app.get('/hcc', function(req, res) {
    var data=['1111','2222','3333','4444']
    //如果这里不用JSON.stringify，data就会调用它的to.string()方法
    //就掉了2个[],变成'1111,2222,3333,4444'
    console.log(req.query.callback)
    res.send(req.query.callback+'('+JSON.stringify(data)+')');
});

jsonp请求数据

>>>cors实现跨域

cors(Cross-Origin Resourse Sharing跨域源资源共享)利用浏览器对于不同源的请求，会在请求页面的源信息添加一个origin等于当前请求页面的源信息。在服务器端，返回数据的时候，设置响应头的Access-Control-Allow-Origin等于对应的页面源信息，浏览器发现请求头的origin和服务器返回的响应头中的值对应上了，就发送了数据，如果不匹配，请求就会被驳回，没有得到响应的数据。
代码书写
和ajax的基本上一致，就是多了一条代码res.header("Access-Control-Allow-Origin","http://a.hcc.com:8080"),告诉浏览器后台允许origin等于http://a.hcc.com:8080的页面源访问数据。

var btn=document.querySelector(".btn")
var message=document.querySelector(".message")
btn.addEventListener('click',function () {
    var xhr=new XMLHttpRequest();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            showMessage(JSON.parse(xhr.responseText));
        }
    }
    xhr.open('get',"http://b.hcc.com:8080/hcc",true)
    xhr.send();
})
function showMessage(data){
    for(var i=0;i<data.length;i++){
        message.innerHTML+=data[i]+'<br>';
    }
}
//后台代码
app.get('/hcc', function(req, res) {
    var data=['1111','2222','3333','4444']
    res.header('Access-Control-Allow-Origin','http://a.hcc.com:8080')
    res.send(data);
});

cors跨域请求

>>>降域

降域利用的是本身就有一定关联的域名，通过document.domain方法对不同的域名降域，从而形成同源，进行数据的交互(http://a.hcc.com:8080和http://b.hcc.com:8080都降域成http://hcc.com:8080)

//http://a.hcc.com:8080/a.html页面下
document.querySelector(".left input").addEventListener('input',function(){
    document.querySelector('.left p').innerHTML=this.value;
    window.frames[0].document.querySelector('#input').value=this.value;
})
//把域名为a.hcc.com降域为hcc.com
document.domain='hcc.com'


//http://b.hcc.com:8080/b.html页面
document.querySelector('#input').addEventListener('input',function(){
    //在这个窗口下window.parent切换到了a的window下
    window.parent.document.querySelector('.left input').value=this.value;
})
//把域名为b.hcc.com降域为hcc.com
document.domain='hcc.com';

>>>postMessage()

由于window的postMessage()方法可以发送数据到不用的域，在不同的域下另一个页面，我们接受数据从而反应到页面上

//http://a.hcc.com:8080/a.html页面下
document.querySelector(".left input").addEventListener('input',function(){
    document.querySelector('.left p').innerHTML=this.value;
    //相对于给http://b.hcc.com:8080发送了一个数据
    //window.frames[0].postMessage(this.value,'http://b.hcc.com:8080');
    window.frames[0].postMessage(this.value,'*');
})
   //接受别的域传来的数据
window.addEventListener('message',function(e) {
    document.querySelector(".left input").value = e.data
    //console.log(e.data);
});

//http://b.hcc.com:8080/b.html页面
document.querySelector('#input').addEventListener('input',function(){
    //在这个窗口下window.parent切换到了a的window下
    window.parent.postMessage(this.value, '*');
})
   //在当前的window中接受http://a.hcc.com:8080发送的message,
window.addEventListener('message',function(e) {
    document.querySelector('#input').value = e.data
    console.log(e.data);
    console.log(e.origin);//http://a.hcc.com:8080
});

个人总结跨域请求不像同源策略中，我可以不经过你的同意给你发送数据。跨域必须又要一定的许可，强扭的瓜不甜，说不定还鱼死网破呢？所以在别人同意的情况下，你想怎么来就怎么来了。

1. jsonp 通过加载对应服务器接口的js代码到页面，但是也是经过了服务器心甘情愿的给你传递不属于它自己的字符串（页面中的函数名）
2. cors cors更加直接，直接告诉了服务器我允许你来接受我的数据，当我不高兴的时候，把Access-Control-Allow-Origin关闭就不能访问了
3. 降域 都是心甘情愿降了一级，从而达成同源
4. window.postMessage() 是指定给一个域名发送了请求，心甘情愿发送你想要的东西，你只需要接受就行了。

个人实战扩展

根据百度的api接口，获取对应的数据

搜索词的对应接口

<div class="container">
<h1>获取百度的关键字使用说明</h1>
<input type="text" placeholder="搜索" class="text">
</div>
<script>
var text=document.querySelector(".text")
var script="";
text.addEventListener('input',function(){
if(script){
    document.head.removeChild(script)
}
script=document.createElement('script')
//对应的接口和数据
script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.value+'&cb=showMessage'
document.head.appendChild(script)
})
function showMessage(data){
console.log(data)
}
</script>

输出得到的数据

可以看出得到了是一个对象，里面包括相应的数据，对数据进行相应的处理，就可以得到我们想要的。