SpringBoot 實現先後端分離的跨域訪問（CORS）

時間 2019-11-13

標籤 springboot 實現後端分離訪問 cors 欄目 Spring 简体版

原文原文鏈接

社區原文連接：http://www.spring4all.com/article/177html

序言：跨域資源共享向來都是熱門的需求，使用CORS能夠幫助咱們快速實現跨域訪問，只需在服務端進行受權便可，無需在前端添加額外設置，比傳統的JSONP跨域更安全和便捷。前端

#1、基本介紹jquery

簡單來講，CORS是一種訪問機制，英文全稱是Cross-Origin Resource Sharing，即咱們常說的跨域資源共享，經過在服務器端設置響應頭，把發起跨域的原始域名添加到Access-Control-Allow-Origin 便可。git

#1. CORS工做原理github

CORS實現跨域訪問並非一蹴而就的，須要藉助瀏覽器的支持，從原理題圖咱們能夠清楚看到，簡單的請求（一般指GET/POST/HEAD方式，並無去增長額外的請求頭信息）直接建立了跨域請求的XHR對象，而複雜的請求則要求先發送一個"預檢"請求，待服務器批准後才能真正發起跨域訪問請求。web

根據官方文檔W3C規範-CORS 的描述，目前CORS使用了以下頭部信息：ajax

注：請求頭信息由瀏覽器檢測到跨域自動添加，無需過多幹預，重點放在Response headers，它能夠幫助咱們在服務器進行跨域受權，例如容許哪些原始域可放行，是否須要攜帶Cookie信息等。spring

#2. Request Headers（請求頭）跨域

Origin
表示跨域請求的原始域。
Access-Control-Request-Method
表示跨域請求的方式。（如GET/POST）
Access-Control-Request-Headers
表示跨域請求的請求頭信息。

#3. Response headers（響應頭）數組

Access-Control-Allow-Origin
表示容許哪些原始域進行跨域訪問。（字符數組）
Access-Control-Allow-Credentials
表示是否容許客戶端獲取用戶憑據。（布爾類型）使用場景：例如如今從瀏覽器發起跨域請求，而且要附帶Cookie信息給服務器。則必須具有兩個條件：**1. 瀏覽器端：**發送AJAX請求前需設置通訊對象XHR的withCredentials 屬性爲true。 **2.服務器端：**設置Access-Control-Allow-Credentials爲true。兩個條件缺一不可，不然即便服務器贊成發送Cookie，瀏覽器也沒法獲取。正確姿式以下：

Access-Control-Allow-Methods
表示跨域請求的方式的容許範圍。（例如只受權GET/POST）
Access-Control-Allow-Headers
表示跨域請求的頭部的容許範圍。
Access-Control-Expose-Headers
表示暴露哪些頭部信息，並提供給客戶端。（由於基於安全考慮，若是沒有設置額外的暴露，跨域的通訊對象XMLHttpRequest只能獲取標準的頭部信息）
Access-Control-Max-Age
表示預檢請求 [Preflight Request] 的最大緩存時間。

#2、CORS實現跨域訪問

#受權方式

方式1：返回新的CorsFilter
方式2：重寫WebMvcConfigurer
方式3：使用註解（@CrossOrigin）
方式4：手工設置響應頭（HttpServletResponse ）

注：CorsFilter / WebMvcConfigurer / @CrossOrigin 須要SpringMVC 4.2 以上的版本才支持，對應SpringBoot 1.3 版本以上都支持這些CORS特性。不過，使用SpringMVC4.2 如下版本的小夥伴也不用慌，直接使用方式4經過手工添加響應頭來受權CORS跨域訪問也是能夠的。附：在SpringBoot 1.2.8 + SpringMVC 4.1.9 親測成功。

注：方式1和方式2屬於全局CORS配置，方式3和方式4屬於局部CORS配置。若是使用了局部跨域是會覆蓋全局跨域的規則，因此能夠經過@CrossOrigin註解來進行細粒度更高的跨域資源控制。

#1. 返回新的CorsFilter（全局跨域）

在任意配置類，返回一個新的CorsFilter Bean，並添加映射路徑和具體的CORS配置信息。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        //1.添加CORS配置信息
        CorsConfiguration config = new CorsConfiguration();
          //放行哪些原始域
          config.addAllowedOrigin("*");
          //是否發送Cookie信息
          config.setAllowCredentials(true);
          //放行哪些原始域(請求方式)
          config.addAllowedMethod("*");
          //放行哪些原始域(頭部信息)
          config.addAllowedHeader("*");
          //暴露哪些頭部信息（由於跨域訪問默認不能獲取所有頭部信息）
          config.addExposedHeader("*");

        //2.添加映射路徑
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

#2. 重寫WebMvcConfigurer（全局跨域）

在任意配置類，返回一個新的WebMvcConfigurer Bean，並重寫其提供的跨域請求處理的接口，目的是添加映射路徑和具體的CORS配置信息。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            //重寫父類提供的跨域請求處理的接口
            public void addCorsMappings(CorsRegistry registry) {
                //添加映射路徑
                registry.addMapping("/**")
                        //放行哪些原始域
                        .allowedOrigins("*")
                        //是否發送Cookie信息
                        .allowCredentials(true)
                        //放行哪些原始域(請求方式)
                        .allowedMethods("GET","POST", "PUT", "DELETE")
                        //放行哪些原始域(頭部信息)
                        .allowedHeaders("*")
                        //暴露哪些頭部信息（由於跨域訪問默認不能獲取所有頭部信息）
                        .exposedHeaders("Header1", "Header2");
            }
        };
    }
}

#3. 使用註解（局部跨域）

在方法上（@RequestMapping）使用註解 @CrossOrigin ：

@RequestMapping("/hello")
	@ResponseBody
	@CrossOrigin("http://localhost:8080") 
	public String index( ){
		return "Hello World";
	}

或者在控制器（@Controller）上使用註解 @CrossOrigin ：

@Controller
@CrossOrigin(origins = "http://xx-domain.com", maxAge = 3600)
public class AccountController {

    @RequestMapping("/hello")
    @ResponseBody
    public String index( ){
        return "Hello World";
    }
}

#4. 手工設置響應頭（局部跨域）使用HttpServletResponse對象添加響應頭（Access-Control-Allow-Origin）來受權原始域，這裏Origin的值也能夠設置爲"*" ，表示所有放行。

@RequestMapping("/hello")
	@ResponseBody
	public String index(HttpServletResponse response){
		response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
		return "Hello World";
	}

#3、測試跨域訪問

首先使用 Spring Initializr 快速構建一個Maven工程，什麼都不用改，在static目錄下，添加一個頁面：index.html 來模擬跨域訪問。目標地址: http://localhost:8090/hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Page Index</title>
</head>
<body>
<h2>前臺系統</h2>
<p id="info"></p>
</body>
<script src="webjars/jquery/3.2.1/jquery.js"></script>
<script>
    $.ajax({
        url: 'http://localhost:8090/hello',
        type: "POST",
        success: function (data) {
            $("#info").html("跨域訪問成功:"+data);
        },
        error: function (data) {
            $("#info").html("跨域失敗!!");
        }
    })
</script>
</html>

而後建立另外一個工程，在Root Package添加Config目錄並建立配置類來開啓全局CORS。

package com.hehe.yyweb.config;

@Configuration
public class GlobalCorsConfig {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }
}

接着，簡單編寫一個Rest接口，並指定應用端口爲8090。

package com.hehe.yyweb;

@SpringBootApplication
@RestController
public class YyWebApplication {

    @Bean
    public TomcatServletWebServerFactory tomcat() {
        TomcatServletWebServerFactory tomcatFactory = new TomcatServletWebServerFactory();
        tomcatFactory.setPort(8090); //默認啓動8090端口
        return tomcatFactory;
    }

    @RequestMapping("/hello")
    public String index() {
        return "Hello World";
    }

    public static void main(String[] args) {
        SpringApplication.run(YyWebApplication.class, args);
    }
}

最後分別啓動兩個應用，而後在瀏覽器訪問：http://localhost:8080/index.html ，能夠正常接收JSON數據，說明跨域訪問成功！！

嘗試把全局CORS關閉，或者沒有單獨在方法或類上受權跨域，再次訪問：http://localhost:8080/index.html 時會看到跨域請求失敗！！

#4、源碼和文檔

Github源碼：SpringBoot-Cross-Orgin

專題地址：SpringBoot 從入門到上癮

規範文檔：W3C規範-CORS

傳統文檔：SpringMVC-CORS 使用手冊

推薦閱讀：跨域資源共享 CORS 詳解 - 阮一峯