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

概述

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

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

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

         而這個輸出路徑實際上在服務器上是不存在的，這個路徑只是另一臺服務器某個路徑而已，這就是使用了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/訪問時，頁面正常顯示

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

項目核心代碼結構截圖

   項目模塊依賴

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

 

 

 

 

 

 

 

zookeeper、dubbo服務啓動 

 

 

dubbo管控臺 

 

 

 

 

 

 

 REST服務平臺