跨域-CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。

CORS的实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

所以，CORS实现主要是服务器端进行设置，我们的前端代码不需要做什么操作。

前端代码：

**HTML**
<button class="getData">获取数据</button>

**JavaScript**
  var btn=document.getElementById("#getData");
  btn.addEventListener('click', function(){
    var xhr = new XMLHttpRequest();
    xhr.open('get', 'http://www.wuxiaozhou.com/getData', true);
    xhr.send();
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4 && xhr.status === 200){
        writeData( JSON.parse(xhr.responseText) )
      }
    }
    window.xhr = xhr
  })
   function writeData(data){
    for(var i=0;i<data.length;i++){
        document.write(data[i]);
    }
  }

后端代码：

app.get('/getNews', function(req, res){
    var data = ["海贼王","火影忍者","灌篮高手","名侦探柯南"];
    res.header("Access-Control-Allow-Origin","http://www.xiaozhou.com"); 
    //res.header("Access-Control-Allow-Origin", "*"); 
    res.send(data);
})

前端代码里，比如代码页面所在的域名是http://www.xiaozhou.com我给个按钮绑定了一个事件，点击按钮会向为http://www.wuxiaozhou.com/getData获取数据。因为两者的主机名不一样，所以这个是跨域访问。

但是在后端代码里，有这一行：

res.header("Access-Control-Allow-Origin","http://www.xiaozhou.com"); 

所以来自http://www.xiaozhou.com的请求可以获取到数据。

如果把http://www.xiaozhou.com换成*，那么所有的跨域请求都可以从这个服务器获取到数据。