什么是同源？什么是跨域？
跨域是指从一个域名的网页去请求另一个域名的资源，即请求不同源的资源。
同源的三个条件：
网络协议、端口、域名（子域名）全部相同，三者缺一不可。
有任何一个不同，则涉及到跨域，详见表格：
| 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及以下的浏览器不支持）
支持所有的跨域访问，但存在安全风险
<?php
header('Access-Control-Allow-Origin: *');
?>
只支持该域名访问（定向）
header('Access-Control-Allow-Origin: http://a.com');
JSONP 兼容度高
原理：
dom元素的src属性可以跨域获取资源，而且这种方案不受浏览器的限制。
传递的数据为JSON格式，p可以理解为package，将数据打包进JSON。
不需要后台特殊处理。
注意：
- 有src属性的标签有：<img>、<script>
- JSONP只能用于发起GET请求，无法发起JSONP的POST请求
JSONP的原生JS语法
将“访问链接？callback=函数名”写入内容为空的script标签的src中。
<script> //函数即对所请求回来的数据进行的处理方法
function doSomething(backData){
console.log(backData);
}
</script>
<script src="http://192.168.19.68/2018-1-5/05.JSONP/api/backData.php?callback=doSomething"></script>
jQuery请求JSONP
<script src="./js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('h2').click(function(){
$.get({
//请求地址
url:"http://192.168.19.68/2018-1-5/05.JSONP/api/backData.php",
success:function(backData){
console.log(backData); //函数即对所请求回来的数据进行的处理方法
},
dataType:'jsonp' // 人为的告诉jQ这是JSONP的接口
})
})
})
</script>
jQuery封装好的JSONP方法
$.getJSON( "http://b.a.com/bar?callback=callback", function( data ){
// 处理跨域请求得到的数据
});
