問答

什么是同源策略

• 源：如果兩個頁面的協(xié)議，端口和域名是相同的屑那，則兩個頁面具有相同的源拱镐。
• 同源策略限制從一個源加載的文檔或腳本與另一個不同的源的資源進行交互。
• 即一個頁面不能調用另一個不同源中的腳本持际。（可以引用沃琅，例如src，但不能讀寫）

什么是跨域蜘欲？跨域有幾種實現(xiàn)形式

• 跨域：從一個頁面去請求讀或者寫另一個頁面的資源益眉，突破同源策略的限制。
• 跨域的幾種實現(xiàn)形式：
• • 降域：僅限主域名相同子域名不同的兩個頁面交互姥份，可以通過設置document.damain屬性來使兩個頁面的域名相同郭脂，從而避開同源策略，實現(xiàn)跨域澈歉。
• • JSONP：即json with padding展鸡，這種方式可以實現(xiàn)跨域
• • CORS：即Cross-Origin Resource Sharing 跨域資源共享，通過增加一個新的響應頭實現(xiàn)跨域埃难。
• • window.postMessage ： HTML5中新規(guī)定的屬性莹弊，也可以實現(xiàn)跨域
• • 其他方式，利用hash或利用window.name涡尘，不建議使用

jsonp 的原理是什么

• 我們知道script標簽中的src屬性可以引用別的源的腳本箱硕，我們可以利用這個特性，在網頁中動態(tài)的創(chuàng)建添加script標簽悟衩，請求需要訪問的頁面資源的url剧罩，服務器將數(shù)據放在一個指定名字的回調函數(shù)中給傳回來，由于網頁已經定義的該函數(shù)座泳，參數(shù)被返回后惠昔，便會立即執(zhí)行幕与。

CORS是什么

• CORS的全稱是Cross-Origin Resources Sharing，它允許瀏覽器向跨源服務器镇防，發(fā)出請求啦鸣，從而克服了AJAX只能同源使用的限制，支持現(xiàn)代瀏覽器来氧，IE支持10以上诫给。
• 實現(xiàn)方式很簡單，當你使用 XMLHttpRequest 發(fā)送請求時啦扬，瀏覽器發(fā)現(xiàn)該請求不符合同源策略中狂，會給該請求加一個請求頭：Origin，后臺進行一系列處理扑毡，如果確定接受請求則在返回結果中加入一個響應頭：Access-Control-Allow-Origin; 瀏覽器判斷該相應頭中是否包含 Origin 的值胃榕，如果有則瀏覽器會處理響應，我們就可以拿到響應數(shù)據瞄摊，如果不包含瀏覽器直接駁回勋又，這時我們無法拿到響應數(shù)據。所以 CORS 的表象是讓你覺得它與同源的 ajax 請求沒啥區(qū)別换帜，代碼完全一樣楔壤。

練習

本地搭建服務器，演示同源策略

• 首先使用XAMPP搭建服務器惯驼，然后修改hosts挺邀，在hosts的最后添加兩行代碼：

127.0.0.1 reedsun.com
127.0.0.1 b.com

這樣當我訪問reedsun.com和b.com都會定向到我的本地服務器。

• 給index.html和main.js添加如下代碼

// index.html
<script src="http://b.com/main.js"></script>

// main.js
alert("我是b.com");

發(fā)現(xiàn)成功：

src引用成功.JPG

說明引用不受同源策略的影響跳座。

• 我們更改index.html的代碼：

<script>
    $.get("http://b.com/main.js");
</script>

發(fā)現(xiàn)并沒有運行b.com/main.js端铛，查看報錯，發(fā)現(xiàn)是同源策略阻止了a.com/index.html的ajax行為:

演示同源策略.JPG

至少使用一種方式解決跨域問題

• 創(chuàng)建一個index.html和一個data.php疲眷，我們打算用reedsun.com/index.html訪問b.com/data.php里的數(shù)據禾蚕，我打算使用CURS方法。

//  index.html
  <script>
    document.damain = "b.com";
    $.get("http://b.com/data.php", function(response){
        console.log(response);
    });
  </script>
  
//  data.php
<?php   
echo "我是 b.com/data.php狂丝，當你看到這條提示换淆，說明你已經跨域成功了";
?>

• 刷新頁面，沒有得到數(shù)據几颜，提示被同源策略阻止：

CURS跨域.JPG

• 將data.php加上響應頭：

//  data.php
<?php   
header("Content-type: ");    
header('Access-Control-Allow-Origin: http://reedsun.com');
echo "我是 b.com/data.php倍试，當你看到這條提示，說明你已經跨域成功了";
?>

• 再次刷新頁面蛋哭，發(fā)現(xiàn)響應成功：

CURS跨域2.JPG