Nginx伺服器中處理AJAX跨域請求的配置方法講解_nginx

Nginx 實現AJAX跨域請求
AJAX從一個域請求另一個域會有跨域的問題。那麼如何在nginx上實現ajax跨域請求呢？要在nginx上啟用跨域請求，需要添加add_header Access-Control*指令。如下所示：

location /{add_header 'Access-Control-Allow-Origin' 'http://other.subdomain.com';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET'; ......the rest of your configuration here...... }

注釋如下：

• 第一條指令：授權從other.subdomain.com的請求
• 第二條指令：當該標誌為真時，響應於該請求是否可以被暴露
• 第三天指令：指定請求的方法，可以是GET，POST等

如果需要允許來自任何域的訪問，可以這樣配置：

Access-Control-Allow-Origin: *

重啟nginx

service nginx reload

ajax跨域請求測試
成功時，回應標頭是如下所示：

HTTP/1.1 200 OKServer: nginxAccess-Control-Allow-Origin: other.subdomain.com

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

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

 從下圖的Firebug中可以看到，該頁面通過Ajax反覆請求一個名為/api/counter的路徑以徑擷取最新的下載數量。

而這個輸出路徑實際上在伺服器上是不存在的，這個路徑只是另外一台伺服器某個路徑而已，這就是使用了Nginx的反向 Proxy功能實現的。
      1、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_pas
s配置修改為http://hfahe.maxthon.com:81這種形式即可。
         2、Apache
         Apache反向 Proxy需要使用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指令都是反向 Proxy需要的配置。ProxyPass用於將一個遠程伺服器映射到本機伺服器的URL空間中。而ProxyPassReverse主要解決後端伺服器重新導向造成的繞過反向 Proxy的問題，在後端伺服器會進行伺服器端跳轉時使用，對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