最簡單實作跨域的方法：使用nginx反向代理

什麼是跨域跨域，指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制。 所謂同源是指，域名，協議，端口相同。瀏覽器執行javascript腳本時，會檢查這個腳本屬於那個頁面，如果不是同源頁面，就不會執行。 同源策略的目的，是防止駭客做一些做姦犯科的勾當。比如說，如果一個銀行的一個應用程式允許使用者上傳網頁，如果沒有同源策略，駭客可以編寫一個登陸表單提交到自己的伺服器上，得到一個看上去相當高大上的頁面。駭客把這個頁面透過郵件等發給用戶，用戶誤以為這是某銀行的主網頁進行登陸，就會洩漏自己的用戶資料。而因為瀏覽器的同源策略，駭客無法收到表單資料。 現在隨著RESTFUL的流行，許多應用提供http/https介面的API，透過xml/json格式對外提供服務，實現開放架構。如，微博、微信、天氣預報、openstack等網站和應用都提供restful介面。 Web應用程式也在單一頁面方向發展。 越來越多的web應用程式現在是這樣的架構：靜態單一web頁ajax呼叫RESTFUL服務我們本來可以利用各個網站提供的API，做出很多精彩的Web應用。但瀏覽器執行javascript時的跨域限制，就成為了這類開放架構的攔路虎。 本文提出了一種簡單有效的方式來解決跨域問題。 常用的跨域方法常用的跨域方法有這樣一些：1，使用iFrame訪問另一個域。 接著再從另一頁讀取iFrame的內容。 jquery等有一些封裝。 據說Firefox等可能不支援讀取另一個iFrame的內容。 2，jsonp。需要伺服器支援。使用script src動態得到一段java程式碼。是回呼頁面上的js函數，參數是一個json物件。 jquery也有封裝。 3，設定http頭，Access-Control-Allow-Origin：*但據說IE有一些版本不辨識這個http頭。 4，伺服器代理。如，伺服器寫一個url的處理action。其參數是一個url。這台伺服器會用參數拼湊一個url,用httpclient函式庫去執行url，然後把讀取的內容再輸出到http客戶端。 nginx反向代理實現跨域上面提到的這些跨域方法，都有一些問題。有的不能支援所有瀏覽器，有的需要修改javascript程式碼，有的需要重寫伺服器端程式碼。有的在session等場景下會有問題。 其實，用nginx反向代理實現跨域，是最簡單的跨域方式。只需要修改nginx的配置即可解決跨域問題，支援所有瀏覽器，支援session，不需要修改任何程式碼，並且不會影響伺服器效能。 我們只需要配置nginx，在一個伺服器上配置多個前綴來轉發http/https請求到多個真實的伺服器即可。這樣，這個伺服器上所有url都是相同的網域、協定和連接埠。因此，對於瀏覽器來說，這些url都是同源的，沒有跨域限制。而實際上，這些url實際上是由實體伺服器提供服務。這些伺服器內的javascript可以跨網域呼叫所有這些伺服器上的url。 下面，給出一個nginx支持跨域的例子，進行具體說明。 如，我們有兩個pythonflask開發的專案：testFlask1和testFlask2。 testFlask2專案上的javascript腳本要透過ajax方式呼叫testFlask1的一個url，取得一些資料。 正常情況下部署，就會有跨域問題，瀏覽器拒絕執行如下這樣的呼叫。

1

2

3

4

5

4

5) unction() {

    $.get("127.0.0.1:8081/partners/json", 函數（結果）{

        $("div"$(

🎜"div"🎜);

    });

});

下面把testFlask2專案的javascrip檔案修改一下。這樣訪問同源的url，就不會有跨域問題。

1

2

3

4

5

4

5) unction() {

    $.得到("partners/json", 函數（結果）{

        $("div").html(result);

    });

});

但是，我們testFlask2專案其實沒有partners/json這樣的url，那要怎麼處理呢？ 我們這樣寫nginx的檔案： 我們這樣寫nginx的檔案： 

1

2

3

4

2

3

4

2

3

4

23

42

3 910

11 12

server{  

listen8000;

listen8000;🎜🎜🎜🎜🎜listen8000;🎜🎜🎜🎜🎜listen8000;🎜🎜🎜🎜🎜listen8000;🎜🎜🎜🎜🎜listen8000； {🎜🎜🎜🎜    🎜🎜🎜include🎜uwsgi_params;🎜🎜🎜🎜    🎜

  }

  地點/夥伴 {

    重寫^.+夥伴/?(.*)$ /$1 休息;

    includeuwsgi_params;

  

  }

}

我們把testFlask2專案部署在8080埠的根目錄下。把提供web服務的testFlask1專案部署在/partners目錄下。 但我們的testFlask1專案並不能處理/partners/json這樣的url請求。那怎麼辦呢？ 透過rewrite^.+partners/?(.*)$ /$1 break; 這條指令，nginx可以把收到的/partners/*請求全部轉為/*請求後再轉發給背後的真實web伺服器。 這樣，RESTFUL的ajax客戶端程序，只需要給出特定前綴的url就可以呼叫任意伺服器提供的RESTFUL介面了。 甚至，透過nginx的反向代理，我們還能呼叫其他公司開發的網站所提供的RESTFUL介面。 如，

1

2

3

4

5

4

5

45

45

4

5

4🎜🎜5🎜 {🎜🎜🎜🎜  🎜🎜rewrite^.+sohu/?(.*)$ /$1 break;🎜🎜🎜🎜  🎜🎜🎜include🎜uwsgi_params;🎜🎜🎜🎜so

}

我們就把sohu網站整個搬到我們的8080:/sohu/目錄下了，我們的javascript就可以盡情調用其RESTFUL服務了。 順便說一下，rewrite^.+sohu/?(.*)$ /$1 break;  這句指令中，$1表示(.*)這個部分。第一對()內的參數是$1，第二對()內的參數就是$2，以此類推。 總結本文介紹了利用nginx的反向代理的功能，實現跨域訪問任意應用和網站的方法。 nginx是一個高效能的網頁伺服器，常用作反向代理伺服器。 nginx作為反向代理伺服器，就是把http請求轉送到另一個或一些伺服器上。 透過把本地一個url前綴映射到要跨域存取的web伺服器上，就可以實現跨域存取。 對於瀏覽器來說，訪問的就是同源伺服器上的一個url。而nginx透過偵測url前綴，把http請求轉送到後面真實的實體伺服器。並透過rewrite指令把前綴再去掉。這樣真實的伺服器就可以正確處理請求，並且不知道這個請求是來自代理伺服器的。 簡單說，nginx伺服器欺騙了瀏覽器，讓它認為這是同源調用，從而解決了瀏覽器的跨域問題。又透過重寫url，欺騙了真實的伺服器，讓它以為這個http請求是直接來自與使用者瀏覽器的。 這樣，為了解決跨域問題，只需要動一下nginx設定檔即可。簡單、強大、有效率!

以上就介紹了最簡單實現跨域的方法：使用nginx反向代理，包括了方面的內容，希望對PHP教程有興趣的朋友有所幫助。