什么叫同源
源其实指的就是URL，同源的条件是两个网站的协议、域名、端口都一致，才能称为同源。
同源策略
同源策略出于网站安全性的考虑，限制不同源之间资源访问的一种策略，简单来说有如下几种：
-
AJAX请求不能发送
-
无法读取DOM元素并进行操作
-
无法读取cookie，localstrotage、IndexDB。
值得一提的是，有些请求是不受到跨域限制。例如：WebSocket，script、img、iframe、video、audio标签的src属性等,即使是https请求也不受限制。
如何解决跨域问题
常见的三种解决跨域的方案如下：
-
在后台使用proxy代理，因为同源策略实现应用在浏览器前端，后台并没有限制，前台调用同源的接口，到了后台将该接口请求转发到非同源的地址。
-
利用W3c颁发的CORS标准（跨域资源共享cross-origin-resource-sharing），在服务器响应头设置
Access-Control-Allow-Origin和Access-Control-Allow-Credentials，就可以跨域请求并传递cookie，传递cookie还有一个前提， 就是还需要在客户端在发送ajax请求中设置withCredentials属性为true。 -
josnP方案，使用不受同源策略影响的标签<script src>等，向请求目的地传一个callback函数，服务的查出数据后用callback包裹后返回给客户端。JQuery的ajax请求封装了jsonP，datatype时传递：jsonP，并且传递一个jsonP参数，值为callback就可以了。
josnP方式详解
服务端代码如下：
jsonp-server
result = callback + "(" + result + ")";
return result前端代码有两种：
1.使用原生script标签：
script-client
$('#btn').click(function(){
$("head").append("<script src='url?callback=showData'><\/script>");
});
function showData(data){
/*do something*/
}因为服务端返回的是callback值包裹的数据，即showData(data),在脚本中会发现有一个showData函数，因此会调用它来处理data数据。
2.ajax封装
前端代码如下：
ajax-client
$.ajax({
url:url.... /*不需要加callback参数*/
type:get,
dataType:"jsonP",
success:function(data){
/*do something*/
}
});封装的ajax会自动生成一个callback，并且将返回的数据传递的给function（data）处理，因为开发者不需要关注callback参数。
尝试不适用jsonP也能获取阿里官网logo，查看reponse返回的access-control-allow-origin参数值为*,所有不受同源策略影响。
相关链接