跨域 -JSONP
1、什么是同源策略？
同源策略(Same origin Policy)
浏览器出于安全方面的考虑，只允许与同域下的接口交互。
所谓“同源策略”，即不同源的客户端脚本在没有明确授权情况下，不允许读写对方的资源。
同域指的是？
同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口
如：
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)
不同源的例子：
http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)
需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域
2、什么是跨域？跨域有几种实现形式？
而所谓的跨域，指的是突破同源策略的限制，本源的客户端脚本访问其他源的数据。
跨域的实现方式
目前，实现跨域访问的方法包括：
- JSONP
- Cross-Origin Resource Sharing
- HTML5 postMessage
- 其他Hack
- 利用hash
- 利用window.name
这里主要讲解常用的JSONP和CORS两种跨域方法。
3、JSONP 的原理是什么？
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
它的基本思想是:
1.网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；
2.服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
首先，网页动态插入<script>元素，由它向跨源网址发出请求
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.head.appendChild(script);
}
window.onload = function () {
addScriptTag('http://example.com/ip?callback=foo');
}
function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};
上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。
服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。
foo({
"ip": "8.8.8.8"
});
由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。
4、CORS是什么？
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
相比JSONP只能发GET请求，CORS允许任何类型的请求。
如何通过CORS完成跨源AJAX请求:
前端用 XMLHttpRequest 跨域访问时，浏览器会在请求头中添加：origin
后端会添加一个响应头：Access-Control-Allow-Origin
浏览器判断该相应头中Access-Control-Allow-Origin的值是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
5、根据视频里的讲解演示三种以上跨域的解决方式？
本地搭建服务器，演示同源策略
ty.png
a.ji.com代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$.ajax({
url:"http://b.ji.com/2.php",
type:"get",
dataType:"json",
success:function(data){
alert(data);
},
error:function(){
alert("出错")
}
});
</script>
</body>
</html>
b.ji.com代码
<?php
$data="123";
echo json_encode($data);
?>
报错了？
QQ图片20170119202243.png
解决办法
1.CORS
在http://b.ji.com/2.php中添加
header("Access-Control-Allow-Origin: http://a.ji.com");
<?php
header("Access-Control-Allow-Origin: http://a.ji.com");
$data="123";
echo json_encode($data);
?>
QQ图片20170119202731.png
GitHub代码
2.Jsonp
网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
<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://b.ji.com/1.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>
1.png
3.postMessage
3.png
