coding
筱進GG的gravatar頭像
筱進GG2019-08-01 11:50:22
SpringBoot之實現前后端分離的跨域訪問(CORS)

我們在研發中,跨域資源共享向來都是熱門的需求,使用CORS可以幫助我們快速實現跨域訪問,只需在服務端進行授權即可,無需在前端添加額外設置,比傳統的JSONP跨域更安全和便捷。

一、基本介紹

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

1. CORS工作原理

CORS實現跨域訪問并不是一蹴而就的,需要借助瀏覽器的支持,從原理題圖我們可以清楚看到,簡單的請求(通常指GET/POST/HEAD方式,并沒有去增加額外的請求頭信息)直接創建了跨域請求的XHR對象,而復雜的請求則要求先發送一個"預檢"請求,待服務器批準后才能真正發起跨域訪問請求。

SpringBoot之實現前后端分離的跨域訪問(CORS)

根據官方文檔W3C規范-CORS的描述,目前CORS使用了如下頭部信息:

注:請求頭信息由瀏覽器檢測到跨域自動添加,無需過多干預,重點放在Response headers,它可以幫助我們在服務器進行跨域授權,例如允許哪些原始域可放行,是否需要攜帶Cookie信息等。

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,瀏覽器也無法獲取。正確姿勢如下:

SpringBoot之實現前后端分離的跨域訪問(CORS)

  • Access-Control-Allow-Methods

表示跨域請求的方式的允許范圍。(例如只授權GET/POST)

  • Access-Control-Allow-Headers

表示跨域請求的頭部的允許范圍。

  • Access-Control-Expose-Headers

表示暴露哪些頭部信息,并提供給客戶端。(因為基于安全考慮,如果沒有設置額外的暴露,跨域的通信對象XMLHttpRequest只能獲取標準的頭部信息)

  • Access-Control-Max-Age

表示預檢請求 [Preflight Request] 的最大緩存時間。

二、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配置信息。

@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配置信息。

@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";
    }

三、測試跨域訪問

首先使用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。

@Configuration
public class GlobalCorsConfig {

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

接著,簡單編寫一個Rest接口 ,并指定應用端口為8090。

@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數據,說明跨域訪問成功!!

SpringBoot之實現前后端分離的跨域訪問(CORS)SpringBoot之實現前后端分離的跨域訪問(CORS)

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

SpringBoot之實現前后端分離的跨域訪問(CORS) ok可以了!

我的springboot系列有需要獲取源碼的朋友可以看我個人主頁 加我QQ獲取哦!

 

 


打賞

分享到:

最近瀏覽
Jason_zqw LV3昨天
星星星星星星
陳簫goddess LV1510月12日
月亮月亮月亮星星星星星星
gxhaha LV1110月11日
月亮月亮星星星星星星
liangfangqin LV310月6日
星星星星星星
AaronFo9月27日
暫無貢獻等級
lris_luanling LV99月23日
月亮月亮星星
走丟的小怪獸 LV89月19日
月亮月亮
194ice LV19月19日
星星
小熊2015 LV29月19日
星星星星
hhuangh LV49月19日
月亮
頂部客服微信二維碼底部
>掃描二維碼關注最代碼為好友掃描二維碼關注最代碼為好友
pk10在哪里玩正规