1.背景介紹

理解跨域首先必須要了解同源策略。同源策略是瀏覽器上為安全性考慮實施的非常重要的安全策略。

跨域是指一個域下的文件或指令碼試圖去請求另一個域下的資源，這裡跨域是廣義的。

廣義的跨域：

1.) 資源跳轉： A連結、重定向、表單提交

2.) 資源嵌入： link script img frame等dom標籤，還有樣式中background:url()、@font-face()等檔案外鏈

3.) 指令碼請求： js發起的ajax請求、dom和js物件的跨域操作等

同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+埠"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。

同源策略限制以下幾種行為：

1.) Cookie、LocalStorage 和 IndexDB 無法讀取

2.) DOM 和 JS物件無法獲得

3.) AJAX 請求不能傳送

2.知識剖析

瀏覽器支援的跨域方法

網頁為了獲取資源本身有些屬性可以跨域請求資源

link script @font-face

img video iframe

網頁支援的傳送請求的方法

Ajax 表單提交

1 JSONP

JSONP 是 JSON with padding（填充式 JSON 或引數式 JSON）的簡寫，是應用 JSON 的一種新方法。

JSONP 由兩部分組成：回撥函式和資料。回撥函式是當響應到來時應該在頁面中呼叫的函式。回撥函式的名字一般是在請求中指定的。而資料就是傳入回撥函式中的 JSON資料。

                    
                    function handleResponse(response){ 
                        alert("You’re at IP address " + response.ip + ", which is in " + 
                              response.city + ", " + response.region_name); 
                    } 
                     
                    var script = document.createElement("script"); 
                    script.src = "http://freegeoip.net/json/?callback=handleResponse"; 
                    document.body.insertBefore(script, document.body.firstChild); 
                
 

            

2 CORS - Cross-Origin Resource Sharing

通過 XHR 實現 Ajax 通訊的一個主要限制，來源於跨域安全策略。預設情況下，XHR 物件只能訪 問與包含它的頁面位於同一個域中的資源。這種安全策略可以預防某些惡意行為。但是，實現合理的跨 域請求對開發某些瀏覽器應用程式也是至關重要的。

CORS 背後的基本思想，就是使用自定義的 HTTP 頭部 讓瀏覽器與伺服器進行溝通，從而決定請求或響應是應該成功，還是應該失敗。

3 伺服器反向代理

這種方法基本思路是傳送正常的http請求，利用服務端之間的資源請求不會有跨域限制的特點，後臺伺服器轉發請求到目標伺服器請求資源。把跨域的問題交給伺服器實現。

Nginx反向代理: 前端發起的請求被Nginx攔截，再由Nginx代由轉發請求到資源伺服器請求資源。

                        location / {
                            　　proxy_pass http://127.0.0.1:5000;
                            }
                

3.常見問題

Nginx反向代理如何實現

4.解決方案

                        location ^~/cross_origin/ {
                            #重寫訪問路徑
                            rewrite ^~/cross_origin/(.*)$ /$1 break;
                            　　proxy_pass http://127.0.0.1:5000;
                            }
                

                    $.ajax({
                        url:'/cross_origin/get_json?type=20170126',
                        type:'GET',
                        dataType:'json',
                        success:function (data) {
                            $('#show').val(data.text)
                        }
                    })
                

5.編碼實戰

6.擴充套件思考

其他實現跨域的方法還有很多

與iframe相關的 location.hash、window.name、postMessage

WebSocket通訊協議以及其它Ajax的改進方法

如何選擇

比如單向的資料請求，我們應該優先選擇JSONP或者window.name，

雙向通訊優先採取location.hash

在未與資料提供方達成通訊協議的情況下我們也可以用server proxy的方式來抓取資料

7.參考文獻

參考二  JS 高程

8.更多討論

問：jsonp的優缺點

答：優點在於能夠直接訪問響應文字，支援在瀏覽器與伺服器之間雙向通訊。JSONP 是從其他域中載入程式碼執行。如果其他域不安全，很可能會在響應中夾帶一些惡意程式碼；其次，要確定 JSONP 請求是否失敗並不容易。

問：跨域的方式有哪些？

答：document.domain + iframe   location.hash + iframe  window.name + iframe  postMessage 

Nginx反向代理 CORS JSONP  web sockets 

問：同源策略是什麼

答：

同源策略是瀏覽器眾多重要的安全措施之一，它規定

不同源的客戶端指令碼在沒明確授權的情況下，不能讀寫對方的資源。

一個源由三個部分確定：協議（http與https）域名（頂域與子域，不同的子域）埠；這三個元素都要相同才是在同一個源下。

客戶端指令碼主要是指JavaScript和ActionScript（Flash）。

授權：伺服器通過某種方式告訴瀏覽器，另一個域下的指令碼可以訪問我。

資源：HTTP頭，DOM樹，Cookie，localStorage等。

技能樹.IT修真院   

 “我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。

這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。

快來與我一起學習吧~邀請連結 點選開啟連結