什么是跨域

为什么要跨域
因为浏览器的同源策略，只允许本域下的接口交互

什么是同源策略

浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

怎么才是同源：

1，同协议：如都是HTTP或HTTPS
2，同域名：如 http://jrg.com/a和http://jrg.com/b
3，同端口：如都是80端口

所以跨域就是绕过同源策略去获取数据。不知道如何定义，老师说是一种现象。

跨域的几种方式：

1，JSONP
2，CORS
3，降域
4，postMessage

JSONP

JSONP是通过script标签加载数据的方式去获取数据 当作js代码去执行，提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后，在原始数据上包裹这个函数名，发送给前端。

JSONP需要后端的配合才可以实现。

后台如何做：

 if(pathObj.query.callback){
        res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')')
      }else{
        res.end(JSON.stringify(news))
      }

判断是否存在这个函数名，存在的话就包裹函数名发送回去。

前端要提前声明好函数，可在这个函数里面操作数据

  function appendHtml(news){
    var html = '';
    for( var i=0; i<news.length; i++){
      html += '<li>' + news[i] + '</li>';
    }
    console.log(html);
    $('.news').innerHTML = html;
  }

CORS

CORS是一种Ajax跨域请求资源的方式，支持现代浏览器，IE10以上。

如何实现：
当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，就会给该请求加一个请求头：orgin，后台经过一系列处理，如果确定接受请求，则会在返回结果中加一个响应头：Access-Control-Allow-Orgin;然后浏览器判断是否包含请求头的orgin，如果有的话，浏览器就会处理响应，就可以获得响应的数据；如果没有，浏览器就会直接驳回，无法拿到数据。

后台如何处理：

res.setHeader('Access-Control-Allow-Origin','http://localhost:8081')
      //res.setHeader('Access-Control-Allow-Origin','*')
      res.end(JSON.stringify(news))

*代表所有人都可以获取数据。
或者你可以在里面写上你的页面的域名。这样就只有你可以拿到数据。