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

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

什么是跨域

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

一般跨域會出現的問題

一般來說，跨域會出現如下的問題：

實際項目中出現的問題

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

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

如果設置了這個配置，那么如果前端的入口是browser-res.in.meizu.com,那么它是可以訪問到browser.in.meizu.com提供的接口的。

前端同學用了v-res.in.meizu.com這個域名作為h5端訪問入口，訪問browser.in.meizu.com，由於此時nginx並沒有相關的配置，因此出現了如下的問題：

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

1.  
   /**
2.  
   * 跨域訪問時允許對服務端提交請求過濾器
3.  
   * @author liguo
4.  
   * @date 2017-12-31
5.  
   *
6.  
   */
7. public class CrossDomainFilter implements Filter {
8.  
   @Override
9.  
   public void init(FilterConfig filterConfig) throws ServletException {
10.  
    }
11.  
12. @Override
13.  
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
14.  
    throws IOException, ServletException {
15.  
    //跨域訪問轉換
16.  
    HttpServletResponse httpResponse = (HttpServletResponse) response;
17.  
    httpResponse.setHeader( "Access-Control-Allow-Origin","*");
18.  
    chain.doFilter(request, response);
19.  
    }
20.  
    /*
21.  
    * (non-Javadoc)
22.  
    * @see javax.servlet.Filter#destroy()
23.  
    */
24.  
    @Override
25.  
    public void destroy() {
26.  
    }
27. }

然后在web.xml中配置這個過濾器。
嘗試使用過濾器來解決這個問題，在本地聯調時沒有出現問題。后來部署到測試環境后，出現了以下的問題：

這是因為在本地沒有跑nginx,但是部署到測試環境以后，跑了nginx,而nginx中已經有了相關的配置，因此出現了以上的問題。

 

如何解決這個問題

方法一

先前nginx中有以下的配置：

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

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

方法二

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

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

綜述

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