用Nginx和Apache的反向代理解決Ajax的跨域問題

概述ajax

         Ajax開發中使人頭疼的問題之一是跨域問題。在服務器端來講,咱們經常使用的手段之一就是利用Nginx或者Apache的反向代理功能。apache

         傲遊主站上有一個很吸引人的功能,就是下載次數計數,以下圖所示。這個功能就是利用了上述技術實現的。後端

 從下圖的Firebug中能夠看到,該頁面經過Ajax反覆請求一個名爲/api/counter的路徑以徑獲取最新的下載數量。api

         而這個輸出路徑實際上在服務器上是不存在的,這個路徑只是另一臺服務器某個路徑而已,這就是使用了Nginx的反向代理功能實現的。跨域

反向代理服務器

         反向代理(Reverse Proxy),顧名思義,就是代理的反向功能。咱們使用代理,能夠訪問一些咱們所不能直接訪問到的網絡,或者能夠隱藏本身的真實身份。而反向代理,能夠在不暴露內部服務器的狀況下,讓外部用戶訪問咱們內部、防火牆後的服務。網絡

        

    使用反向代理主要有如下好處:負載均衡

1. 請求的統一控制,包括設置權限、過濾規則等;框架

2. 隱藏內部服務真實地址,暴露在外的只是反向代理服務器地址;分佈式

3. 實現負載均衡,內部能夠採用多臺服務器來組成服務器集羣,外部仍是能夠採用一個地址訪問;

4. 解決Ajax跨域問題。

5. 做爲真實服務器的緩衝,解決瞬間負載量大的問題。

Nginx與Apache配置

         一、Nginx

         回到計數器的這個例子,Nginx的配置片斷以下所示:

         location /api/counter {

             rewrite (.*) /out break;

               proxy_pass http://hfahe.maxthon.com;

             proxy_set_header Host "hfahe.maxthon.com";

         }

     那麼訪問http://www.maxthon.cn/api/counter這個地址,輸出和直接訪問http://hfahe.maxthon.com/out這個地址是徹底同樣的,以下圖所示。經過這種方式,本地的Ajax就可以讀取到其餘遠程服務器的數據了。

     proxy_set_header參數在須要進行域名的轉發時使用。Nginx還能夠進行端口的轉發,只需將proxy_pass配置修改成http://hfahe.maxthon.com:81這種形式便可。

         二、Apache

         Apache反向代理須要使用mod_proxy和mod_proxy_http.so等模塊。

         在Windows下的配置以下所示:

         LoadModule proxy_module modules/mod_proxy.so

         LoadModule proxy_http_module modules/mod_proxy_http.so

 

         ProxyRequests Off

         ProxyPass /start http://i.maxthon.cn/

 

         ProxyPass /proxy http://192.168.1.111/proxy/

         ProxyPassReverse /proxy http://192.168.1.111/proxy/ # for server redirect

         ProxyPass和ProxyPassReverse指令都是反向代理須要的配置。ProxyPass用於將一個遠程服務器映射到本地服務器的URL空間中。而ProxyPassReverse主要解決後端服務器重定向形成的繞過反向代理的問題,在後端服務器會進行服務器端跳轉時使用,對HTTP重定向時迴應中的Location、Content-Location和URI頭裏的URL進行調整。

         而在Linux下的配置以下所示:

         LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so

         LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so

         ProxyRequests Off

         ProxyPass /fb http://fb.maxthon.com/ajax

         ProxyPassReverse /fb http://192.168.1.111/proxy/ # for server redirect

         一個有趣的問題

         在上面的例子中,/start是做爲http://i.maxthon.cn的反向代理的,可是在用/start和/start/訪問時,結果徹底不同。

         在使用/start進行訪問時,頁面空白,許多文件沒法加載:

         

         在使用/start/訪問時,頁面正常顯示

須要瞭解分佈式技術請聯繫我

項目核心代碼結構截圖

分佈式框架介紹 - kafkaee - kafkaee的博客

   項目模塊依賴

分佈式框架介紹 - kafkaee - kafkaee的博客

特別提醒:開發人員在開發的時候能夠將本身的業務REST服務化或者Dubbo服務化

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客
 

zookeeper、dubbo服務啓動 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客
 

dubbo管控臺 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 REST服務平臺

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

 

分佈式框架介紹 - kafkaee - kafkaee的博客

相關文章
相關標籤/搜索