跨域请求？两种解决方案CORS与JSONP

什么是同源？什么是跨域？

跨域是指从一个域名的网页去请求另一个域名的资源，即请求不同源的资源。

同源的三个条件：

网络协议、端口、域名（子域名）全部相同，三者缺一不可。
有任何一个不同，则涉及到跨域，详见表格：

URL	说明	是否允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://70.32.92.74/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名	不允许

---

目前比较主流的解决方案有两种，CORS与JSONP。

CORS(corss origin resource share) 兼容度低

跟前端没有任何关系在服务器端设置“允许跨域访问”即可。

注意：

HTML5语法，前提条件是浏览器需要支持这个header（IE10及以下的浏览器不支持）

支持所有的跨域访问，但存在安全风险

只支持该域名访问（定向）

header('Access-Control-Allow-Origin: http://a.com');

---

JSONP 兼容度高

原理：

dom元素的src属性可以跨域获取资源，而且这种方案不受浏览器的限制。
传递的数据为JSON格式，p可以理解为package，将数据打包进JSON。
不需要后台特殊处理。

注意：

1. 有src属性的标签有：、

   jQuery请求JSONP

   jQuery封装好的JSONP方法

   $.getJSON( "http://b.a.com/bar?callback=callback", function( data ){
       // 处理跨域请求得到的数据
   });