快捷導(dǎo)航

SpringSecurity-2.7中跨域問題解析

更新時(shí)間：2024年01月06日 09:46:53 作者：itl-coder.github.io

這篇文章主要介紹了SpringSecurity-2.7中跨域問題,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

SpringSecurity-2.7中跨域問題

訪問測試

起因

寫這篇的起因是會(huì)了解到 SSM(@CrosOrigin)解決跨域,但是會(huì)在加入SpringSecurity配置后,這個(gè)跨域解決方案就失效了,而/login這個(gè)請求上是無法添加這個(gè)注解或者通過配置(WebMvcConfig)去解決跨域,所以只能使用SpringSecurity提供的.cros()去解決跨域,但是在學(xué)習(xí)過程中,如果稍微粗心,可能會(huì)出現(xiàn)跨域不通的問題,而以下將會(huì)說明SpringSecurity是如何配置跨域的

Postman發(fā)起的請求不屬于異步請求(區(qū)分前后端分離的JSON)

使用axios發(fā)起異步請求,

<!-- 
	前端: 使用 Live Server 啟動(dòng)訪問 http://127.0.0.1:5500/index.html
 	后端: localhost:8080/login 
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">發(fā)起異步請求</button>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      let btnEl = document.querySelector('#btn');
      btnEl.onclick = function () {
        console.log('click......................');
        axios({
          url: 'http://localhost:8080/login',
          method: 'post',
          data: {
            username: 'zhangsan',
            password: '123456',
          },
        }).then((res) => {
          console.log(res);
        });
      };
    </script>
  </body>
</html>

請求測試

SpringSecurity-配置

config

// 【/login】需要顯示的聲明出來,在前后端分離中，本文沒有采用的是 ajax 向后端發(fā)送異步請求 
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
    /**
     * 請求配置
     * authorizeHttpRequests: 開啟權(quán)限請求管理,針對 http 請求進(jìn)行授權(quán)配置
     * mvcMatchers: 匹配請求
     * - permitAll: 代表放行該資源,該資源位公共資源,無需認(rèn)證和授權(quán)可以直接訪問
     * - anyRequest().authenticated(): 代表所有請求,必須認(rèn)證之后才能訪問
     * - formLogin: 代表開啟表單認(rèn)證
     * <strong>放行資源必須放在認(rèn)證資源之前</strong>
     */
    http.authorizeHttpRequests((authorizeHttpRequests) ->
            authorizeHttpRequests
                    // 預(yù)檢請求是怎么知道的：官網(wǎng)中有這樣一段描述，如圖
                    .antMatchers(HttpMethod.OPTIONS, "/login").permitAll()
                    .anyRequest().authenticated()
    );
 /**
  * 跨域配置
  */
 http.cors().configurationSource(corsConfigurationSource());
// WHITELIST 自定義的放行資源數(shù)組, /login不能出現(xiàn)在里面
@Bean
public WebSecurityCustomizer webSecurityCustomizer() {
    return (web) -> web.ignoring().antMatchers(WHITELIST);
}
}
// 此處關(guān)于下方的描述可以不更改,依然使用此配置
@Bean
CorsConfigurationSource corsConfigurationSource() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); // 新建一個(gè)跨域配置源
    // 你只要點(diǎn)擊 .cors().configurationSource( <- 點(diǎn)擊進(jìn)入這個(gè)方法，查看出這個(gè)參數(shù),就明白為什么給了 CorsConfiguration,)
    CorsConfiguration configuration = new CorsConfiguration(); // 新建一個(gè)跨域配置
    configuration.setAllowCredentials(true); // 【這個(gè)憑證問題,后續(xù)會(huì)給出詳細(xì)解釋,在 axios 的配置中默認(rèn)是false,【axios 中 `withCredentials` 表示跨域請求時(shí)是否需要使用憑證】瀏覽器是否應(yīng)當(dāng)發(fā)送憑證信息，如cookie。
    configuration.setAllowedMethods(Arrays.asList("*")); // 允許的請求方法,*表示允許所有方法
    configuration.setAllowedHeaders(Arrays.asList("*")); // 允許的請求頭,*表示允許所有頭
    configuration.setMaxAge(Duration.ofHours(1)); // 預(yù)檢請求的有效期，有效期內(nèi)不必再次發(fā)送，默認(rèn)是1800秒。
    configuration.setAllowedOriginPatterns(Arrays.asList("*"));// 允許的請求源
    source.registerCorsConfiguration("/**", configuration); // 注冊跨域配置
    return source;
}