問答

什么是同源策略

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

什么是跨域？跨域有幾種實現形式

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

jsonp 的原理是什么

• 我們知道script標簽中的src屬性可以引用別的源的腳本，我們可以利用這個特性，在網頁中動態的創建添加script標簽，請求需要訪問的頁面資源的url，服務器將數據放在一個指定名字的回調函數中給傳回來，由于網頁已經定義的該函數，參數被返回后，便會立即執行。

CORS是什么

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

練習

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

• 首先使用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");

發現成功：

src引用成功.JPG

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

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

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

發現并沒有運行b.com/main.js，查看報錯，發現是同源策略阻止了a.com/index.html的ajax行為:

演示同源策略.JPG

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

• 創建一個index.html和一個data.php，我們打算用reedsun.com/index.html訪問b.com/data.php里的數據，我打算使用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，當你看到這條提示，說明你已經跨域成功了";
?>

• 刷新頁面，沒有得到數據，提示被同源策略阻止：

CURS跨域.JPG

• 將data.php加上響應頭：

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

• 再次刷新頁面，發現響應成功：

CURS跨域2.JPG