1、什么是同源策略？
同源策略(Same origin Policy)
瀏覽器出于安全方面的考慮，只允許與同域下的接口交互。
所謂“同源策略”，即不同源的客戶端腳本在沒有明確授權情況下，不允許讀寫對方的資源。
同域指的是？
同協(xié)議：如都是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 (協(xié)議不同)
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.服務器收到請求后，將數據放在一個指定名字的回調函數里傳回來。
首先，網頁動態(tài)插入<script>元素，由它向跨源網址發(fā)出請求
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);
};
上面代碼通過動態(tài)添加<script>元素，向服務器example.com發(fā)出請求。注意，該請求的查詢字符串有一個callback參數，用來指定回調函數的名字，這對于JSONP是必需的。
服務器收到這個請求以后，會將數據放在回調函數的參數位置返回。
foo({
"ip": "8.8.8.8"
});
由于<script>元素請求的腳本，直接作為代碼運行。這時，只要瀏覽器定義了foo函數，該函數就會立即調用。作為參數的JSON數據被視為JavaScript對象，而不是字符串，因此避免了使用JSON.parse的步驟。
4、CORS是什么？
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
相比JSONP只能發(fā)GET請求，CORS允許任何類型的請求。
如何通過CORS完成跨源AJAX請求:
前端用 XMLHttpRequest 跨域訪問時，瀏覽器會在請求頭中添加：origin
后端會添加一個響應頭：Access-Control-Allow-Origin
瀏覽器判斷該相應頭中Access-Control-Allow-Origin的值是否包含 Origin 的值，如果有則瀏覽器會處理響應，我們就可以拿到響應數據，如果不包含瀏覽器直接駁回，這時我們無法拿到響應數據。
5、根據視頻里的講解演示三種以上跨域的解決方式？
本地搭建服務器，演示同源策略
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);
?>
報錯了？
解決辦法
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);
?>
GitHub代碼
2.Jsonp
網頁通過添加一個<script>元素，向服務器請求JSON數據，這種做法不受同源政策限制；服務器收到請求后，將數據放在一個指定名字的回調函數里傳回來。
<script>
/* function $(id){
return document.querySelector(id) }*/
var btn = document.getElementsByClassName('btn')[0];
//點擊按鈕時實時創(chuàng)建一個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>
3.postMessage
