跨域訪問方法介紹(1)--同源策略

一、同源定義

若是兩個 URL 的 protocol(協議)、host(主機)和 port(端口)都相同的話，則這兩個 URL 是同源；不然爲不一樣源。

當前頁面url	被請求頁面url	是否同源	緣由
http://www.test.com/	http://www.test.com/index.html	是	同源（協議、域名、端口號相同）
http://www.test.com/	https://www.test.com/index.html	否	協議不一樣（http/https）
http://www.test.com/	http://www.baidu.com/	否	主域名不一樣（test/baidu）
http://www.test.com/	http://blog.test.com/	否	子域名不一樣（www/blog）
http://www.test.com:8080/	http://www.test.com:7001/	否	端口號不一樣（8080/7001）

二、同源策略

同源策略控制不一樣源之間的交互，它是一個重要的安全策略，它用於限制一個源的文檔或者它加載的腳本如何能與另外一個源的資源進行交互。它能幫助阻隔惡意文檔，減小可能被攻擊的媒介。

不一樣源的交互一般分爲三類：

跨域寫操做（Cross-origin writes）通常是被容許的。例如連接（links），重定向以及表單提交。
跨域資源嵌入（Cross-origin embedding）通常是被容許。
跨域讀操做（Cross-origin reads）通常是不被容許的，但常能夠經過內嵌資源來巧妙的進行讀取訪問。

能夠跨源嵌入的資源：

一、<script src="..."></script> 標籤嵌入的跨域腳本。
二、<link rel="stylesheet" href="..."> 標籤嵌入的CSS。因爲CSS的鬆散的語法規則，CSS的跨域須要一個設置正確的 HTTP 頭部 Content-Type 。不一樣瀏覽器有不一樣的限制。
三、<img> 標籤嵌入的圖片。
四、<video> 和 <audio> 標籤嵌入的多媒體資源。
五、<object>、 <embed> 和 <applet> 標籤嵌入的插件。
六、@font-face 引入的字體。一些瀏覽器容許跨域字體（ cross-origin fonts），一些須要同源字體（same-origin fonts）。
七、<iframe> 載入的任何資源。站點可使用 X-Frame-Options 消息頭來阻止這種形式的跨域交互

不能夠跨源訪問的資源：

一、Cookie、LocalStorage、IndexedDB 等存儲性內容
二、Dom 節點
三、Ajax 請求