跨域訪問支持（Spring Boot、Nginx、瀏覽器）

原文：http://www.itmuch.com/work/cors/

最近家中事多，好久沒有寫點啥了。一時間竟然不知從何說起。先說下最近家里發生的事情吧：

1. 老爸肺氣腫住院；
2. 老媽甲狀腺囊腫
3. 兒子喘息性支氣管炎住院
4. 我莫名其妙尿膿。不要誤會，我沒有大保健。有空了考慮將去醫院檢查的經歷寫出來，絕對狗血、精彩！！

家里的事情竟然能按條標記，真是可悲。顧影自憐一下。好，言歸正傳。最近出於某些原因，筆者需要實現跨域請求。

下面咱們詳細討論實現跨域的步驟。跨域的玩法有很多，例如服務器端設置、瀏覽器端設置、Jsonp等等。本文只描述具體組件的具體做法，不談論茴香豆的茴字有幾種寫法。

一、Spring Boot跨域配置

我們的后端使用Spring Boot。Spring Boot跨域非常簡單，只需書寫以下代碼即可。

 

@Configuration
public class CustomCORSConfiguration {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("*");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    return corsConfiguration;
  }

  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
  }
}

代碼非常簡單，不做贅述。該代碼在Spring Boot 1.5.4中測試通過。

二、Nginx跨域配置

某天，我們將Spring Boot應用用Nginx反向代理。而前端跨域請求的需求不減，於是乎。

Nginx跨域也比較簡單，只需添加以下配置即可。

location / {
    proxy_pass http://localhost:8080;
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
    }
    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
    }
}

 

其中：add_header 'Access-Control-Expose-Headers' 務必加上你請求時所帶的header。例如本例中的“Token”，其實是前端傳給后端過來的。如果記不得也沒有關系，瀏覽器的調試器會有詳細說明。

參考文檔：https://enable-cors.org/server_nginx.html

B.T.W，阿里雲中文檔描述到Nginx也可通過crossdomain.xml配置文件跨域：https://helpcdn.aliyun.com/knowledge_detail/41123.html ，不過筆者並未采用這種方式。

三、瀏覽器設置跨域

Chrome、Firefox本身是可以通過配置支持跨域請求的。

• Chrome跨域：參考文檔：http://www.cnblogs.com/laden666666/p/5544572.html
• Firefox跨域：參考文檔：https://segmentfault.com/q/1010000002532581/a-1020000002533699