快捷導(dǎo)航

Nginx服務(wù)器中處理AJAX跨域請(qǐng)求的配置方法講解

更新時(shí)間：2016年01月13日 17:43:43 作者：蔣宇捷

這篇文章主要介紹了Nginx服務(wù)器中處理AJAX跨域請(qǐng)求的配置方法講解,包括Nginx作Apache的反向代理時(shí)的配置方法,需要的朋友可以參考下

Nginx 實(shí)現(xiàn)AJAX跨域請(qǐng)求
AJAX從一個(gè)域請(qǐng)求另一個(gè)域會(huì)有跨域的問題。那么如何在nginx上實(shí)現(xiàn)ajax跨域請(qǐng)求呢？要在nginx上啟用跨域請(qǐng)求，需要添加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
...
...
 
}

注釋如下：

第一條指令：授權(quán)從other.subdomain.com的請(qǐng)求
第二條指令：當(dāng)該標(biāo)志為真時(shí)，響應(yīng)于該請(qǐng)求是否可以被暴露
第三天指令：指定請(qǐng)求的方法，可以是GET，POST等

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

Access-Control-Allow-Origin: *

重啟nginx

service nginx reload

ajax跨域請(qǐng)求測(cè)試
成功時(shí)，響應(yīng)頭是如下所示：

HTTP/1.1 200 OK
Server: nginx
Access-Control-Allow-Origin: other.subdomain.com

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

傲游主站上有一個(gè)很吸引人的功能，就是下載次數(shù)計(jì)數(shù)，如下圖所示。這個(gè)功能就是利用了上述技術(shù)實(shí)現(xiàn)的。

2016113174307216.gif (268×67)

從下圖的Firebug中可以看到，該頁面通過Ajax反復(fù)請(qǐng)求一個(gè)名為/api/counter的路徑以徑獲取最新的下載數(shù)量。

2016113174332406.gif (372×91)

而這個(gè)輸出路徑實(shí)際上在服務(wù)器上是不存在的，這個(gè)路徑只是另外一臺(tái)服務(wù)器某個(gè)路徑而已，這就是使用了Nginx的反向代理功能實(shí)現(xiàn)的。
1、Nginx
回到計(jì)數(shù)器的這個(gè)例子，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這個(gè)地址，輸出和直接訪問http://hfahe.maxthon.com/out這個(gè)地址是完全一樣的，如下圖所示。通過這種方式，本地的Ajax就能夠讀取到其他遠(yuǎn)程服務(wù)器的數(shù)據(jù)了。

2016113174351088.gif (350×62)

proxy_set_header參數(shù)在需要進(jìn)行域名的轉(zhuǎn)發(fā)時(shí)使用。Nginx還可以進(jìn)行端口的轉(zhuǎn)發(fā)，只需將proxy_pas
s配置修改為http://hfahe.maxthon.com:81這種形式即可。
         2、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用于將一個(gè)遠(yuǎn)程服務(wù)器映射到本地服務(wù)器的URL空間中。而ProxyPassReverse主要解決后端服務(wù)器重定向造成的繞過反向代理的問題，在后端服務(wù)器會(huì)進(jìn)行服務(wù)器端跳轉(zhuǎn)時(shí)使用，對(duì)HTTP重定向時(shí)回應(yīng)中的Location、Content-Location和URI頭里的URL進(jìn)行調(diào)整。
而在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

您可能感興趣的文章: