什麼是跨域
跨域,指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對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
|
$( "button" ).click( function
() { $.get( "127.0.0.1:8081/partners/json" ,
function
(result) { $( "div" ).html(result); }); }); |
下面把testFlask2項目的javascrip文件修改一下。這樣訪問同源的url,就不會有跨域問題。
1
2
3
4
5
|
$( "button" ).click( function
() { $. get ( "partners/json" ,
function
(result) { $( "div" ).html(result); }); }); |
但是,我們testFlask2項目實際上沒有partners/json這樣的url,那怎麼處理呢?
我們這樣編寫nginx的配置文件:
1
2
3
4
5
6
7
8
9
10
11
12
|
server{ listen8000; location/
{ includeuwsgi_params; uwsgi_passunix:/tmp/testFlask2.sock; } location/partners
{ rewrite^.+partners/?(.*)$
/$1 break; includeuwsgi_params; uwsgi_passunix:/tmp/testFlask1.sock; } } |
我們把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
|
location/sohu
{ rewrite^.+sohu/?(.*)$
/$1 break; includeuwsgi_params; proxy_passhttp://www.sohu.com/; } |
我們就把sohu網站整個搬到我們的8080:/sohu/目錄下了,我們的javascript就可以盡情調用其RESTFUL服務了。
順便說一下,rewrite^.+sohu/?(.*)$ /$1 break; 這句命令中,$1表示(.*)這個部分。第一對()內的參數是$1,第二對()內的參數就是$2,以此類推。
總結
本文介紹了利用nginx的反向代理的功能,實現跨域訪問任意應用和網站的方法。
nginx是一個高性能的web服務器,常用作反向代理服務器。nginx作爲反向代理服務器,就是把http請求轉發到另一個或者一些服務器上。
通過把本地一個url前綴映射到要跨域訪問的web服務器上,就可以實現跨域訪問。
對於瀏覽器來說,訪問的就是同源服務器上的一個url。而nginx通過檢測url前綴,把http請求轉發到後面真實的物理服務器。並通過rewrite命令把前綴再去掉。這樣真實的服務器就可以正確處理請求,並且並不知道這個請求是來自代理服務器的。
簡單說,nginx服務器欺騙了瀏覽器,讓它認爲這是同源調用,從而解決了瀏覽器的跨域問題。又通過重寫url,欺騙了真實的服務器,讓它以爲這個http請求是直接來自與用戶瀏覽器的。
這樣,爲了解決跨域問題,只需要動一下nginx配置文件即可。簡單、強大、高效!