同源策略及跨域問題

1、同源策略

• 源（origin）

　　就是協議、域名和端口號。若地址裏面的協議、域名和端口號均相同則屬於同源。
　　如下是相對於 http://www.a.com/test/index.html 的同源檢測：

1. http://www.a.com/dir/page.html ----成功
2. http://www.child.a.com/test/index.html ----失敗，域名不一樣
3. https://www.a.com/test/index.html ----失敗，協議不一樣
4. http://www.a.com:8080/test/index.html ----失敗，端口號不一樣

• 同源策略

　　同源策略是瀏覽器的一個安全功能，不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方資源。因此a.com下的js腳本採用ajax讀取b.com裏面的文件數據是會報錯的。

• 不受同源策略限制的

1. 頁面中的連接，重定向以及表單提交是不會受到同源策略限制的。
2. 跨域資源的引入是能夠的。可是js不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。

2、跨域

• 跨域

　　只要協議、域名、端口號有一個不一樣就是跨域。

• 跨域的緣由

　　跨域問題來源於JavaScript的同源策略，即只有 協議+主機名+端口號(如存在)相同，則容許相互訪問。爲了防止某域名下的接口被其餘域名下的網頁非法調用，是瀏覽器對JavaScript施加的安全限制。也就是說JavaScript只能訪問和操做本身域下的資源，不能訪問和操做其餘域下的資源。跨域問題是針對JS和ajax的，html自己沒有跨域問題，好比a標籤、script標籤、甚至form標籤（能夠直接跨域發送數據並接收數據）等。

3、跨域問題解決方案

• jsonp

　　利用script標籤可跨域的特色，在跨域腳本中能夠直接回調當前腳本的函數。

• cors

　　服務器設置HTTP響應頭中Access-Control-Allow-Origin值，解除跨域限制。

　　注意：這兩個跨域方案都存在一個致命的缺陷，嚴重依賴後端的協助。

　　下面就介紹一種前端獨立就能解決的跨域方案：

• 反向代理（Reverse Proxy）

　　指以代理服務器來接受internet上的鏈接請求，而後將請求轉發給內部網絡上的服務器，並將從服務器上獲得的結果返回給internet上請求鏈接的客戶端，此時代理服務器對外就表現爲一個反向代理服務器。