Nginx 指定多個域名跨域請求配置

時間：2023-02-06 23:56:01 | 來源：建站知識

時間：2023-02-06 23:56:01 來源：建站知識

nginx指定多個域名跨域請求配置

什么是跨域

假設(shè)我們頁面或者應(yīng)用已在 http://www.test1.com 上了，而我們打算從 http://www.test2.com 請求提取數(shù)據(jù)。一般情況下，如果我們直接使用 AJAX 來請求將會失敗，瀏覽器也會返回“源不匹配”的錯誤，"跨域"也就以此由來。跨域的出現(xiàn)主要原因還是安全的限制(同源策略，也就是JavaScript或者Cookie只能夠訪問同域下的內(nèi)容)，因此在日常的項(xiàng)目開發(fā)中會不可避免的出現(xiàn)跨域操作。
和打多數(shù)跨域的解決方案一樣，JSONP是大多數(shù)前端同事的選擇，但是JSONP只支持GET請求。但是如果項(xiàng)目功能需要改成支持POST請求,那么因?yàn)檫@種情況下傳輸?shù)臄?shù)據(jù)量較大，GET形式是搞不定的。此時JSONP并不是一個很好的選擇。此時就需要使用CORS(跨域資源共享，Cross-Origin Resource Sharing).

一般跨域會出現(xiàn)的問題

一般來說，跨域會出現(xiàn)如下的問題：







實(shí)際項(xiàng)目中出現(xiàn)的問題

先前配置中有如下的域名：








http://browser.in.meizu.com是向客戶端或者是H5提供接口訪問的后臺域名，browser-res.in.meizu.com,http://v-res.in.meizu.com都是提供給h5端的入口訪問域名。
先前在nginx中有如下的配置：








如果設(shè)置了這個配置，那么如果前端的入口是browser-res.in.meizu.com,那么它是可以訪問到http://browser.in.meizu.com提供的接口的。
前端同學(xué)用了http://v-res.in.meizu.com這個域名作為h5端訪問入口，訪問http://browser.in.meizu.com，由于此時nginx并沒有相關(guān)的配置，因此出現(xiàn)了如下的問題：








很明顯,這個問題并不是說原程序沒有設(shè)置"add_header Access-Control-Allow-Origin:"。 我們看前面的nginx中的
配置，已經(jīng)設(shè)置了 http://browser-res.in.meizu.com 可以訪問 http://browser.in.meizu.com。但是現(xiàn)在的一個問題是前端的同
學(xué)使用了 "http://v-res.in.meizu.com" 這個域名作為前端的入口,所以就出現(xiàn)了以上的問題：http://browser-res.in.meizu.com是
可以訪問http://browser.in.meizu.com。但是http://v-res.in.meizu.com不可以訪問browser.in.meizu.com.但是當(dāng)時考慮問題只是
認(rèn)為是簡單的跨域問題,沒有考慮到在nginx中的配置,所以就簡單的使用了過濾器來進(jìn)行解決.

/*** 跨域訪問時允許對服務(wù)端提交請求過濾器* @author liguo* @date 2017-12-31**/public class CrossDomainFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)throws IOException, ServletException {//跨域訪問轉(zhuǎn)換HttpServletResponse httpResponse = (HttpServletResponse) response;httpResponse.setHeader("Access-Control-Allow-Origin","*");chain.doFilter(request, response);}/** (non-Javadoc)* @see javax.servlet.Filter#destroy()*/@Overridepublic void destroy() {}} 然后在web.xml中配置這個過濾器。
嘗試使用過濾器來解決這個問題，在本地聯(lián)調(diào)時沒有出現(xiàn)問題。后來部署到測試環(huán)境后，出現(xiàn)了以下的問題：







這是因?yàn)樵诒镜貨]有跑nginx,但是部署到測試環(huán)境以后，跑了nginx,而nginx中已經(jīng)有了相關(guān)的配置，因此出現(xiàn)了以上的問題。

如何解決這個問題

方法一

先前nginx中有以下的配置：








將add_header Access-Control-Allow-Origin:http://browser-res.in.meizu.com修改為add_header Access-Control-Allow-Origin *,也就是修改為如下的內(nèi)容:








這個配置的意思是說，任何的域名都可以訪問browser.in.meizu.com,但是這個配置不安全

方法二

通過設(shè)置變量值解決指定多個域名白名單跨域請求配置（建議使用),也就是將nginx中的配置改為如下的形式













也就是設(shè)置一個變量 $cors_origin 來存儲需要跨域的白名單，通過正則判斷，若是白名單列表，則設(shè)置 $cors_origin 值為對應(yīng)的域名，則做到了多域名跨域白名單功能。

綜述

當(dāng)跨域問題出現(xiàn)時，一般情況下在nginx中通過配置來解決，如果是多個域，那么可以通過設(shè)置變量值解決指定多個域名白名單跨域請求配置（建議使用）.

更多Linux服務(wù)器開發(fā)底層原理知識點(diǎn)：Nginx，ZeroMQ，MySQL，Redis，MongoDB，ZK，流媒體，P2P，線程池，Docker，TCP/IP，協(xié)程，DPDK，Linux內(nèi)核內(nèi)容。+qun720209036獲取