使用Spring Security中遇到的Preflight請求和跨域的問題

shengguo 發布于2019-08-21 17:44 / 1716人閱讀

摘要：首先遇到的就是跨域問題，但是在攜帶請求過程中出現了服務端獲取不到情況。瀏覽器將請求分成兩類簡單請求和非簡單請求。而瀏覽器對這兩種請求的處理是不一樣的。

背景

在一個前后端分離開發的項目中，使用SpringSecurity做安全框架，用JWT來實現權限管理提升RESTful Api的安全性。首先遇到的就是跨域問題，但是在攜帶jwt請求過程中出現了服務端獲取不到jwt情況。

跨域問題

在開發過程中遇到CORS （跨域資源共享）的問題，簡單的在服務器端設置了允許跨域訪問，但是在攜帶jwt請求過程中出現

因為jwt是放在request header中，忽略了在跨域處理是加上允許自己定于的header字段

@Component
public class CorsFilter implements Filter {

    Logger logger= LoggerFactory.getLogger(CorsFilter.class);

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request= (HttpServletRequest) servletRequest;
        HttpServletResponse response= (HttpServletResponse) servletResponse;
        response.setHeader("Access-Control-Allow-Origin",request.getHeader("origin"));
        response.setHeader("Access-Control-Allow-Origin","*");  //允許跨域訪問的域
        response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE,PUT");  //允許使用的請求方法
        response.setHeader("Access-Control-Expose-Headers","*");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Cache-Control,Pragma,Content-Type,Authorization");  //允許使用的請求方法
        response.setHeader("Access-Control-Allow-Credentials","true");//是否允許請求帶有驗證信息
        filterChain.doFilter(servletRequest, servletResponse);
    }

    @Override
    public void destroy() {

    }
}

在網上搜索提到要對OPTIONS請求進行處理返回200，但是測試并沒有起到效果
這里的OPTIONS請求實際上就是preflight請求

Preflight請求

但是問題依然沒有解決，出現如下

google了之后才知道preflight 請求的相關信息

在我們調用后臺接口的時候，經常會發現請求了兩次，其實第一次發送的就是preflight request(預檢請求)。

為什么需要preflight request

我們都知道瀏覽器的同源策略，就是出于安全考慮，瀏覽器會限制從腳本發起的跨域HTTP請求，像XMLHttpRequest和Fetch都遵循同源策略。
瀏覽器限制跨域請求一般有兩種方式：

瀏覽器限制發起跨域請求跨域請求可以正常發起，但是返回的結果被瀏覽器攔截了
一般瀏覽器都是第二種方式限制跨域請求，那就是說請求已到達服務器，并有可能對數據庫里的數據進行了操作，但是返回的結果被瀏覽器攔截了，那么我們就獲取不到返回結果，這是一次失敗的請求，但是可能對數據庫里的數據產生了影響。

為了防止這種情況的發生，規范要求，對這種可能對服務器數據產生副作用的HTTP請求方法，瀏覽器必須先使用OPTIONS方法發起一個預檢請求，從而獲知服務器是否允許該跨域請求：如果允許，就發送帶數據的真實請求；如果不允許，則阻止發送帶數據的真實請求。

瀏覽器將CORS請求分成兩類：簡單請求和非簡單請求。

簡單請求

請求方法是以下三種方法之一

HEAD

GET

POST

HTTP的頭信息不超出以下幾種字段

Accept-Language

Content-Language

Last-Event-ID

Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同時滿足上面兩個條件，就屬于非簡單請求。
而瀏覽器對這兩種請求的處理是不一樣的。

非簡單請求

非簡單請求是那種對服務器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。
非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）

與cors相關更詳細的看參考底部鏈接

解決方法

在我們后臺用了Spring Security作為安全框架，并且沒有對Preflight這個請求做出相應的處理，那么這個請求會導致權限管控失敗。
處理起來也很簡單，只需要在spring security配置類configure方法中增加放行preflight請求

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                // 由于使用的是JWT，我們這里不需要csrf
                .csrf().disable()
                // 基于token，所以不需要session
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
                .authorizeRequests()
                // 所有 / 的所有請求 都放行
                .requestMatchers(CorsUtils::isPreFlightRequest).permitAll()    //對preflight放行
                .antMatchers("/*").permitAll()
                .antMatchers("/u").denyAll()
                .antMatchers("/article/**").permitAll()
                .antMatchers("/video/**").permitAll()
                .antMatchers("/api/**").permitAll()
                .antMatchers("/v2/api-docs", "/configuration/ui", "/swagger-resources/**", "/configuration/**","/swagger-ui.html", "/webjars/**")
                .permitAll()
                .antMatchers("/manage/**").hasRole("ADMIN") // 需要相應的角色才能訪問
                // 除上面外的所有請求全部需要鑒權認證
                .anyRequest().authenticated();

        // 禁用緩存
        http.headers().cacheControl();
        // 添加JWT filter
        http.addFilterBefore(authenticationTokenFilterBean(), UsernamePasswordAuthenticationFilter.class);
        //添加未授權處理
        http.exceptionHandling().authenticationEntryPoint(getAuthenticationEntryPoint());
        //權限不足處理
        http.exceptionHandling().accessDeniedHandler(getAccessDeniedHandler());

    }

最終問題得到解決！

參考：
前端 | 淺談preflight request
跨域資源共享 CORS 詳解

GPU云服務器云服務器 js請求數據遇到的問題嗎使用遇到問題 ajax請求跨域問題圖片spring security

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89931.html

使用Spring Security中遇到的Preflight請求和跨域的問題

摘要：首先遇到的就是跨域問題，但是在攜帶請求過程中出現了服務端獲取不到情況。瀏覽器將請求分成兩類簡單請求和非簡單請求。而瀏覽器對這兩種請求的處理是不一樣的。背景在一個前后端分離開發的項目中，使用SpringSecurity做安全框架，用JWT來實現權限管理提升RESTful Api的安全性。首先遇到的就是跨域問題，但是在攜帶jwt請求過程中出現了服務端獲取不到jwt情況。跨域問題在開...

EscapedDog 2019-08-15 12:34 評論0 收藏0
跨域問題的一次深入研究

摘要：前言最近在業務代碼中深受跨域問題困擾，因此特別寫一篇博客來記錄一下自己對跨域的理解以及使用到的參考資料。內嵌式跨域通常也是允許的。而我使用時因為這個響應報文最后被認為是跨域問題，無法從中獲得的狀態碼。它代表服務器支持跨域時攜帶認證信息。前言最近在業務代碼中深受跨域問題困擾，因此特別寫一篇博客來記錄一下自己對跨域的理解以及使用到的參考資料。本文的項目背景基于vue+vuex+axio...

X_AirDu 2019-08-15 17:53 評論0 收藏0
同源策略和跨域

摘要：一些技術都默認采取了同源策略，這些技術范圍包括但不限于。但是相比較以上的各種場景和繞過同源策略的方法，的跨域請求設置很容易，只需要在目標服務的根目錄下在前端開發的過程中，我們經常遇到跨域的問題，以下的文章將列舉一下我在工作中碰到的跨域問題。以及稍稍的探討一下為什么會有跨域問題的出現，和所謂的同源策略同源策略 1. 歷史 1995 年由 Netscape 公司提出，之后被其他瀏覽器廠...

Achilles 2019-08-29 11:29 評論0 收藏0
同源策略和跨域

摘要：一些技術都默認采取了同源策略，這些技術范圍包括但不限于。但是相比較以上的各種場景和繞過同源策略的方法，的跨域請求設置很容易，只需要在目標服務的根目錄下在前端開發的過程中，我們經常遇到跨域的問題，以下的文章將列舉一下我在工作中碰到的跨域問題。以及稍稍的探討一下為什么會有跨域問題的出現，和所謂的同源策略同源策略 1. 歷史 1995 年由 Netscape 公司提出，之后被其他瀏覽器廠...

ideaa 2019-08-21 14:41 評論0 收藏0
同源策略和跨域

摘要：一些技術都默認采取了同源策略，這些技術范圍包括但不限于。但是相比較以上的各種場景和繞過同源策略的方法，的跨域請求設置很容易，只需要在目標服務的根目錄下在前端開發的過程中，我們經常遇到跨域的問題，以下的文章將列舉一下我在工作中碰到的跨域問題。以及稍稍的探討一下為什么會有跨域問題的出現，和所謂的同源策略同源策略 1. 歷史 1995 年由 Netscape 公司提出，之后被其他瀏覽器廠...

Seay 2019-08-01 15:52 評論0 收藏0