spring boot跨域請求訪問配置以及spring security中配置失效的原理解析

一、同源策略

同源策略[same origin policy]是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。 同源策略是瀏覽器安全的基石。

什么是源

源[origin]就是協議、域名和端口號。例如：http://www.baidu.com:80這個URL。

什么是同源

若地址里面的協議、域名和端口號均相同則屬於同源。

是否是同源的判斷

例如判斷下面的URL是否與 http://www.a.com/test/index.html 同源

• http://www.a.com/dir/page.html 同源
• http://www.child.a.com/test/index.html 不同源，域名不相同
• https://www.a.com/test/index.html 不同源，協議不相同
• http://www.a.com:8080/test/index.html 不同源，端口號不相同

哪些操作不受同源策略限制

1. 頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的；
2. 跨域資源的引入是可以的。但是JS不能讀寫加載的內容。如嵌入到頁面中的<script src="..."></script>，<img>，<link>，<iframe>等。

跨域

受前面所講的瀏覽器同源策略的影響，不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象就需要跨域。 在同源策略的限制下，非同源的網站之間不能發送 AJAX 請求。

如何跨域

• 降域

  可以通過設置 document.damain='a.com'，瀏覽器就會認為它們都是同一個源。想要實現以上任意兩個頁面之間的通信，兩個頁面必須都設置documen.damain='a.com'。

• JSONP跨域

CORS 跨域

二、CORS 簡介

為了解決瀏覽器同源問題，W3C 提出了跨源資源共享，即 CORS(Cross-Origin Resource Sharing)。

CORS 做到了如下兩點：

• 不破壞即有規則
• 服務器實現了 CORS 接口，就可以跨源通信

基於這兩點，CORS 將請求分為兩類：簡單請求和非簡單請求。

1、簡單請求

在CORS出現前，發送HTTP請求時在頭信息中不能包含任何自定義字段，且 HTTP 頭信息不超過以下幾個字段：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type 只限於 [application/x-www-form-urlencoded 、multipart/form-data、text/plain ] 類型

一個簡單的請求例子：

GET /test HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, sdch, br
Origin: http://www.examples.com
Host: www.examples.com

對於簡單請求，CORS的策略是請求時在請求頭中增加一個Origin字段，服務器收到請求后，根據該字段判斷是否允許該請求訪問。

1. 如果允許，則在 HTTP 頭信息中添加 Access-Control-Allow-Origin 字段，並返回正確的結果 ；
2. 如果不 允許，則不在 HTTP 頭信息中添加 Access-Control-Allow-Origin 字段 。

除了上面提到的 Access-Control-Allow-Origin ，還有幾個字段用於描述 CORS 返回結果 ：

1. Access-Control-Allow-Credentials： 可選，用戶是否可以發送、處理 cookie；
2. Access-Control-Expose-Headers：可選，可以讓用戶拿到的字段。有幾個字段無論設置與否都可以拿到的，包括：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 。

2、非簡單請求

對於非簡單請求的跨源請求，瀏覽器會在真實請求發出前，增加一次OPTION請求，稱為預檢請求(preflight request)。預檢請求將真實請求的信息，包括請求方法、自定義頭字段、源信息添加到 HTTP 頭信息字段中，詢問服務器是否允許這樣的操作。

例如一個DELETE請求：

OPTIONS /test HTTP/1.1
Origin: http://www.examples.com
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: X-Custom-Header
Host: www.examples.com

與 CORS 相關的字段有：

1. 請求使用的 HTTP 方法 Access-Control-Request-Method ；
2. 請求中包含的自定義頭字段 Access-Control-Request-Headers 。

服務器收到請求時，需要分別對 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 進行驗證，驗證通過后，會在返回 HTTP頭信息中添加 ：

Access-Control-Allow-Origin: http://www.examples.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

他們的含義分別是：

1. Access-Control-Allow-Methods: 真實請求允許的方法
2. Access-Control-Allow-Headers: 服務器允許使用的字段
3. Access-Control-Allow-Credentials: 是否允許用戶發送、處理 cookie
4. Access-Control-Max-Age: 預檢請求的有效期，單位為秒。有效期內，不會重復發送預檢請求

當預檢請求通過后，瀏覽器會發送真實請求到服務器。這就實現了跨源請求。

三、跨域請求

跨域請求，就是說瀏覽器在執行腳本文件的ajax請求時，腳本文件所在的服務地址和請求的服務地址不一樣。說白了就是ip、網絡協議、端口都一樣的時候，就是同一個域，否則就是跨域。這是由於Netscape提出一個著名的安全策略——同源策略造成的，這是瀏覽器對JavaScript施加的安全限制。是防止外網的腳本惡意攻擊服務器的一種措施。

springboot提供了跨域的方法:

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

1、返回新的CorsFilter(全局跨域)

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（全局跨域）

1、1.5版本為繼承WebMvcConfigurerAdapter 類實現抽象方法,

//springboot 1.5方式
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
 
  @Override
  public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**").allowedHeaders("*")
      .allowedMethods("*")
      .allowedOrigins("*")
      .allowCredentials(true);
  }
}

2.0以后為實現WebMvcConfigurer 接口重寫方法

//springboot 2.0以上的方式
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedHeaders("Content-Type","X-Requested-With","accept,Origin","Access-Control-Request-Method","Access-Control-Request-Headers","token")
                .allowedMethods("*")
                .allowedOrigins("*")
                .allowCredentials(true);
    }
}

3. 編寫Filter過濾器或者攔截器（全局跨域）

使用攔截器實現跨域:

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new HandlerInterceptor() {
            @Override
            public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
                response.addHeader("Access-Control-Allow-Origin", "*");
                response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
                response.addHeader("Access-Control-Allow-Headers",
                        "Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,token");
                return true;
            }
 
            @Override
            public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {
 
            }
 
            @Override
            public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {
 
            }
        });
    }
 
}

使用servlet提供的過濾器進行跨域配置

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 * 請求的基本過濾器 預處理請求頭
 */
@Component
@WebFilter(urlPatterns = {"/*"}, filterName = "tokenAuthorFilter")
public class TokenAuthorFilter implements Filter {

    private static Logger LOG = LoggerFactory.getLogger(TokenAuthorFilter.class);

    @Override
    public void destroy() {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse rep = (HttpServletResponse) response;

        HttpSession session = req.getSession();
        LOG.info("sessionId:{}", session.getId());
        //LOG.info("Origin:{}", req.getHeader("Origin"));

        //設置允許跨域的配置
        // 這里填寫你允許進行跨域的主機ip（正式上線時可以動態配置具體允許的域名和IP）
        rep.setHeader("Access-Control-Allow-Origin", "*");
        //rep.setHeader("Access-Control-Allow-Origin", "*");
        rep.setHeader("Access-Control-Expose-Headers", jwtProperties.getHeader());
        // 允許的訪問方法
        rep.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH");
        // Access-Control-Max-Age 用於 CORS 相關配置的緩存
        rep.setHeader("Access-Control-Max-Age", "3600");
        rep.setHeader("Access-Control-Allow-Headers", "token, Origin, X-Requested-With, Content-Type, Accept");
        //若要返回cookie、攜帶seesion等信息則將此項設置我true
        rep.setHeader("Access-Control-Allow-Credentials", "true");
        // 把獲取的Session返回個前端Cookie
        //rep.addCookie(new Cookie("JSSESIONID", session.getId()));
        chain.doFilter(req, rep);

    }

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

    }

}

4.使用注解（局部跨域）

靈活的跨域方式:注解形式

@CrossOrigin

1、@CrossOrigin使用場景要求

• jdk1.8+
• Spring4.2+

2、@CrossOrigin源碼解析

@Target({ ElementType.METHOD, ElementType.TYPE })
@Retention(RetentionPolicy.RUNTIME)
@Documented
public @interface CrossOrigin {

    String[] DEFAULT_ORIGINS = { "*" };

    String[] DEFAULT_ALLOWED_HEADERS = { "*" };

    boolean DEFAULT_ALLOW_CREDENTIALS = true;

    long DEFAULT_MAX_AGE = 1800;


    /**
     * 同origins屬性一樣
     */
    @AliasFor("origins")
    String[] value() default {};

    /**
     * 所有支持域的集合，例如"http://domain1.com"。
     * <p>這些值都顯示在請求頭中的Access-Control-Allow-Origin
     * "*"代表所有域的請求都支持
     * <p>如果沒有定義，所有請求的域都支持
     * @see #value
     */
    @AliasFor("value")
    String[] origins() default {};

    /**
     * 允許請求頭重的header，默認都支持
     */
    String[] allowedHeaders() default {};

    /**
     * 響應頭中允許訪問的header，默認為空
     */
    String[] exposedHeaders() default {};

    /**
     * 請求支持的方法，例如"{RequestMethod.GET, RequestMethod.POST}"}。
     * 默認支持RequestMapping中設置的方法
     */
    RequestMethod[] methods() default {};

    /**
     * 是否允許cookie隨請求發送，使用時必須指定具體的域
     */
    String allowCredentials() default "";

    /**
     * 預請求的結果的有效期，默認30分鍾
     */
    long maxAge() default -1;
}

2、@CrossOrigin的使用

@RestController
@RequestMapping("/account")
public class AccountController {
  
     @CrossOrigin
     @GetMapping("/{id}")
     public Account retrieve(@PathVariable Long id) {
          // ...
      }
 
     @DeleteMapping("/{id}")
     public void remove(@PathVariable Long id) {
        // ...
     }
 }

package com.example.demo.controller;

import com.example.demo.domain.User;
import com.example.demo.service.IUserFind;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

/**
 * @Title: UserController
 * @ProjectName demo
 * @Description: 請求處理控制器
 * @author 
 * @date 2018/7/2022:18
**/
@RestController
//實現跨域注解
//origin="*"代表所有域名都可訪問
//maxAge飛行前響應的緩存持續時間的最大年齡，簡單來說就是Cookie的有效期 單位為秒
//若maxAge是負數,則代表為臨時Cookie,不會被持久化,Cookie信息保存在瀏覽器內存中,瀏覽器關閉Cookie就消失
@CrossOrigin(origins = "*",maxAge = 3600)
public class UserController {
    @Resource
    private IUserFind userFind;

    @GetMapping("finduser")
    public User finduser(@RequestParam(value="id") Integer id){
        //此處省略相應代碼
    }
}

四、Nginx跨域配置

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

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';
    }
}

五、spring security 跨域問題

配置跨域

@Configuration
public class GlobalCorsConfiguration {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
//        corsConfiguration.addExposedHeader("head1");
        //corsConfiguration.addExposedHeader("Location");
        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

或者

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.addExposedHeader("Authorization");
        return corsConfiguration;
    }
 
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
 
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                .maxAge(3600);
    }
}

spring security下這些跨域配置后，還是會引起跨域的問題，跨域請求還是無法訪問，需要在springsecurity配置中加上cors()來開啟跨域以及requestMatchers(CorsUtils::isPreFlightRequest).permitAll()來處理跨域請求中的preflight請求。（如下代碼紅色標記部分）

//開啟跨域 cors()
        http.cors().and().csrf().disable().authorizeRequests()
                //處理跨域請求中的Preflight請求
 .requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
                .antMatchers(HttpMethod.GET,"/hello/hello").permitAll()
                .antMatchers("/oauth/login").permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                //自定義登錄頁面
                .loginPage("/oauth/login")
                .and()
                .logout()

在springsecurity的配置中設置后，在權限安全框架中才會真正的實現跨域請求。