JSON_跨域

同源策略

就是浏览器规定的只有相同的协议，相同的域名，相同的端口，满足以上条件才能读取对方的资源，否则不能。

什么是跨域？跨域有几种实现形式

跨域：就是通过一些处理，可以让不同域名之间能够相互读取资源
跨域有4种实现形式：
1.JSONP：html可以加载另一个域名的js文件，然后我们可以利用这个功能，后端可以将数据整合成为js格式的字符串让前端加载，加载好后，前端通过函数将其数据华为己用。
2.COSR：跨域资源共享（Cross-Origin Resource Sharing），在后端设置cosr属性，res.header（''Access-Content-Allow-Origin","同意访问的url"），相应的url就能访问这个后端服务器了。
3.降域：2者要设置document.domain='"' 访问的前后都要降域并且2者都要有同一个基础域名。
4.passMassage:window下的一个方法，window.passMessage(值,传递的地址)

JSONP 的原理

html可以加载另一个域名的js文件，然后我们可以利用这个功能，后端可以将数据整合成为js格式的字符串让前端加载，加载好后，前端通过函数将其数据华为己用。
例如

$('.change').addEventListener('click', function(){
    var script = document.createElement('script');
    script.src = 'http://127.0.0.1/getNews?callback=appendHtml';
    document.head.appendChild(script);
    document.head.removeChild(script);
  })
  function appendHtml(news){
  var html = "";
  for(var i = 0; i<news.length;i++){
    html = '<li>'+news[i]+'</li>'
  }
  $(.news).innerHTML = html;
}

以上是前端,下面是后端

app.get("getNews",function(){
  var new = [x,x,x];
  var data = [];
  for (var i = 0; i<3; i++){
    var index = parseInt(Math.random()*news.length);
    data.push(new[index]);
    news.splice(index,1); 
  }
  var cb = req.query.callback;
   if(req.query.callback){
    res.send(cb + '('+ JSON.stringify(data) + ')')
  }else{res.send(data)}
})

CORS是什么

跨域资源共享（Cross-Origin Resource Sharing），分为简单请求和复杂请求，简单请求在后端设置cosr属性，res.header（''Access-Content-Allow-Origin","同意访问的url"），相应的url就能访问这个后端服务器了。

复杂请求：

表面上看起来和简单请求使用上差不多，但实际上浏览器发送了不止一个请求。其中最先发送的是一种"预请求"，此时作为服务端，也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。预请求以OPTIONS形式发送，当中同样包含域，并且还包含了两项CORS特有的内容：

Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
Access-Control-Request-Headers– 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。
显而易见，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。

复杂请求的部分响应头及解释如下：

Access-Control-Allow-Origin（必含） – 和简单请求一样的，必须包含一个域。
Access-Control-Allow-Methods（必含） – 这是对预请求当中Access-Control-Request-Method的回复，这一回复将是一个以逗号分隔的列表。尽管客户端或许只请求某一方法，但服务端仍然可以返回所有允许的方法，以便客户端将其缓存。
Access-Control-Allow-Headers（当预请求中包含Access-Control-Request-Headers时必须包含） – 这是对预请求当中Access-Control-Request-Headers的回复，和上面一样是以逗号分隔的列表，可以返回所有支持的头部。这里在实际使用中有遇到，所有支持的头部一时可能不能完全写出来，而又不想在这一层做过多的判断，没关系，事实上通过request的header可以直接取到Access-Control-Request-Headers，直接把对应的value设置到Access-Control-Allow-Headers即可。
Access-Control-Allow-Credentials（可选） – 和简单请求当中作用相同。
Access-Control-Max-Age（可选） – 以秒为单位的缓存时间。预请求的的发送并非免费午餐，允许时应当尽可能缓存。
一旦预回应如期而至，所请求的权限也都已满足，则实际请求开始发送。

通caniuse.com得知，目前大部分Modern浏览器已经支持完整的CORS，但IE直到IE11才完美支持，所以对于PC网站，还是建议采用其他解决方案，如果仅仅是移动端网站，大可放心使用。

根据视频里的讲解演示三种以上跨域的解决方式

1.JSONP：题目三已有
2.cors：http://js.jirengu.com/mucayijibe/1/edit?html,js,output
3.降域：http://js.jirengu.com/tapafaneni/1/edit?html,output
4.passMassage:http://js.jirengu.com/jawufeyile/1/edit?html,output