Nginx服務器中處理AJAX跨域請求的配置方法講解
Nginx 實現(xiàn)AJAX跨域請求
AJAX從一個域請求另一個域會有跨域的問題。那么如何在nginx上實現(xiàn)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 OK Server: nginx Access-Control-Allow-Origin: other.subdomain.com
用Nginx和Apache的反向代理解決Ajax的跨域問題
傲游主站上有一個很吸引人的功能,就是下載次數(shù)計數(shù),如下圖所示。這個功能就是利用了上述技術實現(xiàn)的。
從下圖的Firebug中可以看到,該頁面通過Ajax反復請求一個名為/api/counter的路徑以徑獲取最新的下載數(shù)量。
而這個輸出路徑實際上在服務器上是不存在的,這個路徑只是另外一臺服務器某個路徑而已,這就是使用了Nginx的反向代理功能實現(xiàn)的。
1、Nginx
回到計數(shù)器的這個例子,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就能夠讀取到其他遠程服務器的數(shù)據(jù)了。
proxy_set_header參數(shù)在需要進行域名的轉發(fā)時使用。Nginx還可以進行端口的轉發(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用于將一個遠程服務器映射到本地服務器的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
相關文章
Windows?Server?Nginx?反向代理Spring?Boot配置無效報404未找到的問題
一個Spring?Boot的系統(tǒng),開發(fā)完成發(fā)布到Windows服務器里,使用nginx作為反向代理,修改刷新配置文件,nginx.conf,總是報錯404,這篇文章主要介紹了Windows?Server?Nginx?反向代理Spring?Boot配置無效?404?未找到的問題及解決方案2024-01-01Nginx+FastDFS搭建圖片服務器的方法實現(xiàn)
這篇文章主要介紹了Nginx+FastDFS搭建圖片服務器的方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-03-03Nginx編譯參數(shù)大全 configure參數(shù)中文詳解
這篇文章主要介紹了Nginx編譯參數(shù)大全,Nginx configure參數(shù)中文詳解,需要的朋友可以參考下2014-04-0418個運維必知的Nginx代理緩存配置技巧(你都掌握了哪些呢)
這篇文章主要介紹了18個運維必知的Nginx代理緩存配置技巧(你都掌握了哪些呢),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-09-09Nginx隱藏index.php和Pathinfo模式配置例子
這篇文章主要介紹了Nginx隱藏index.php和Pathinfo模式配置例子,需要的朋友可以參考下2014-04-04