导语
你家的小孩带了他的朋友来你们的家里玩，你家的小孩如果要在自家屋里拿玩具玩、拿东西吃你自然是不会阻止，但是如果你家小孩的朋友人品不行，乱拿东西吃、乱翻你家的东西，你自然不允许，拿什么东西要通过你的允许才行。
扯了这么多，自然不是为了吹水，而是要为了引出前端开发的一个重要的知识点——同源策略
什么是同源策略
出于保护用户信息安全的目的，现在的浏览器都会实施“同源策略”这个政策，所谓“同源策略”指的是不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。
试想，如果你在淘宝购物完后，带着淘宝的登陆信息又去京东，保不准京东把你给黑掉，okay这只是开个玩笑~~~
但是，在很多情况下我们又经常需要跨域访问资源，比如你要在个人博客上创建一个音乐播放器，但这个接口如果自己创建的话性价比太低了，这就需要其他源提供一个可访问的接口给你使用，这里就涉及到突破同源策略的限制的跨域访问
所谓同源：
- 同协议：如都是http
- 同域名：如都是terenyeung.applinzi.com/newapp/carousel.html和terenyeung.applinzi.com/index.html
- 同端口：如都是80端口
什么是跨域
而所谓的跨域，指的是突破同源策略的限制，本源的客户端脚本访问其他源的数据
跨域的实现方式
目前，实现跨域访问的方法包括：
- JSONP
- Cross-Origin Resource Sharing
- HTML5 postMessage
- 其他Hack
- 利用hash
- 利用window.name
这里主要讲解常用的JSONP和CORS两种跨域方法。
-
JSONP
JSONP的全称是JSON with Padding，
原理
- JSONP是通过script标签加载数据的方式去获取其他源的数据，然后当做js代码来执行；
- 你需要提前在文档中声明一个回调函数，该函数的函数名通过GET的方式向后台传参，后台解析到函数名后在原始数据上padding这个函数名，然后在发给前端，最终这个返回前端的字符串将作为js的一部分执行
范例解析:
//你现在所在的页面是
http://terenyeung.applinzi.com/newapp/task31/jsonp.html
//你现在的需求是想要获取另一个源http://teren.applinzi.com/jsonp.php的数据
//利用jsonp实现跨域访问的具体做法是：
//1.在该页面添加一个script标签，当加载script的时候就会向另一个源（http://teren.applinzi.com/task31/jsonp.php）发送GET的请求；
//2.存放在另一个源的后台脚本对前端发过来的查询字符串（带函数名）进行判断，如果存在则为后台返回的数据包裹上带有该函数名的字符串，即
if($callback){
echo $callback.'('.json_encode($data).')';
}else{
echo $data;
}
<script>
/* function $(id){
return document.querySelector(id) }*/
var btn = document.getElementsByClassName('btn')[0];
//点击按钮时实时创建一个script标签
btn.addEventListener('click',function(){
var script = document.createElement('script');
script.src = 'http://teren.applinzi.com/task31/jsonp.php?callback=appendHtml';
document.body.appendChild(script);
document.body.removeChild(script);
})
function appendHtml(news){
var html='';
for (var i=0 ; i<news.length ; i++){
html += '<li>'+news[i]+'</li>';
console.log(news[i]);
}
document.getElementsByClassName('box')[0].innerHTML = html }
</script>
<?php
header("Content-type: ");
$callback = $_GET['callback'];
$news = array("第11日前瞻：中国冲击4金 博尔特再战200米羽球","正直播柴飚/洪炜出战 男双力争会师决赛","女排将死磕巴西！郎平安排男陪练模仿对方核心","没有中国选手和巨星的110米栏 我们还看吗？", "中英上演奥运金牌大战","博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多","最“出柜”奥运？同性之爱闪耀里约","下跪拜谢与洪荒之力一样 都是真情流露");
$data = array();
for ($i=0;$i<3;$i++){
$idx = intval(rand(0,7));
array_push($data,$news[$idx]);
array_splice($news,$idx,1);
};
if($callback){
echo $callback.'('.json_encode($data).')';
}else{
echo $data; }
?>
代码
-
CORS
CORS的全称是Cross-Origin Resources Sharing，它允许浏览器向跨源服务器，发出请求，从而克服了AJAX只能同源使用的限制
原理
-
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10；
-
浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息——origin字段，告诉跨域的后台这次跨域请求是由哪个源（这里是http://terenyeung.applinzi.com）
发出的
- 实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。服务器根据前端发过来的跨域的ajax请求的origin字段，决定是否同意这次的跨域访问；
如果后台同意的话，可以在后台文档（以php后台为例）中设置如下：
添加一个头：
<?
header('Access-Control-Allow-Origin: *');
//header('Access-Control-Allow-Origin: http://terenyeung.applinzi.com');
?>
[注]*为允许所有的源访问
如果被允许另一个源跨域访问，则返回的头信息一定包含如下字段：
Access-Control-Allow-Origin: http://terenyeung.applinzi.com
或者
Access-Control-Allow-Origin: *
范例解析
<?php
header("Content-type: ");
header('Access-Control-Allow-Origin: *');
$news = array("第11日前瞻：中国冲击4金 博尔特再战200米羽球","正直播柴飚/洪炜出战 男双力争会师决赛","女排将死磕巴西！郎平安排男陪练模仿对方核心","没有中国选手和巨星的110米栏 我们还看吗？", "中英上演奥运金牌大战","博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多","最“出柜”奥运？同性之爱闪耀里约","下跪拜谢与洪荒之力一样 都是真情流露");
$data = array();
for ($i=0;$i<3;$i++){
$idx = intval(rand(0,7));
array_push($data,$news[$idx]);
array_splice($news,$idx,1);
};
echo json_encode($data)
// header('Access-Control-Allow-Origin: http://terenyeung.applinzi.com/task31/CORS.html');
?>
代码
参考资料
阮一峰——浏览器同源政策及其规避方法
阮一峰——跨域资源共享 CORS 详解
知乎——「每日一题」JSONP 是什么？
饥人谷——同源策略及跨域资源共享
网友评论