溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Nginx服務器中如何處理AJAX跨域請求

發(fā)布時間:2022-04-29 16:36:48 來源:億速云 閱讀:365 作者:iii 欄目:大數(shù)據(jù)

今天小編給大家分享一下Nginx服務器中如何處理AJAX跨域請求的相關知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。

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)的。

Nginx服務器中如何處理AJAX跨域請求

 從下圖的firebug中可以看到,該頁面通過ajax反復請求一個名為/api/counter的路徑以徑獲取最新的下載數(shù)量。

Nginx服務器中如何處理AJAX跨域請求

而這個輸出路徑實際上在服務器上是不存在的,這個路徑只是另外一臺服務器某個路徑而已,這就是使用了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ù)了。

Nginx服務器中如何處理AJAX跨域請求

proxy_set_header參數(shù)在需要進行域名的轉(zhuǎn)發(fā)時使用。nginx還可以進行端口的轉(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用于將一個遠程服務器映射到本地服務器的url空間中。而proxypassreverse主要解決后端服務器重定向造成的繞過反向代理的問題,在后端服務器會進行服務器端跳轉(zhuǎn)時使用,對http重定向時回應中的location、content-location和uri頭里的url進行調(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

以上就是“Nginx服務器中如何處理AJAX跨域請求”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學習更多的知識,請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI