Springboot怎麼透過設定WebMvcConfig處理Cors非同源存取跨域問題-java教程-PHP中文網

首頁

Java

java教程

Springboot怎麼透過設定WebMvcConfig處理Cors非同源存取跨域問題

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 10, 2023 pm 02:55 PM

springbootcors

關於Cors跨域的問題，前端有代理和jsonp的常用方式解決這種非同源的訪問拒絕策略，什麼是同源？即域名一致端口一致但是端口下訪問的接口api不同的兩種或者幾種的互相訪問叫做同源訪問，但是若是接口不一致或者域名不一致（這裡泛指IP不一致），那麼對應的就屬於非同源訪問，瀏覽器會拒絕發出請求，直接回复404，有時候我也見過恢復202的就是發出去了但是被後端的Mvc處理hander鏈給拒絕了。那麼配置MVC就是後端處理Cors問題的解決思路。

之前學習過MVC的處理鏈路，從一次請求發過來到回覆資料總共11次處理：

Springboot怎麼透過設定WebMvcConfig處理Cors非同源存取跨域問題

##請求傳送到伺服器端時是由我們的MVC進行處理的，而統一調配任務流程的則是我們的請求分發器，注意這裡請求到處理器之後回去尋找處理器適配器（符合校驗處理的請求才能被允許例如接口含有的合法api ，以及跨域原則），之前我們的微信小程式開發過程中是沒有考慮跨域問題的，原因是我們知道小程式的請求處理都是由微信後台進行分發處理的，也就是在微信的後台時就做了前端的跨域處理，大概是採用動態代理的方式解決了小程式的跨域。

那麼我們先看看MVC的配置介面WebMvcConfigurer 的源代碼：

public interface WebMvcConfigurer {
    default void configurePathMatch(PathMatchConfigurer configurer) {
    }
    default void configureContentNegotiation(ContentNegotiationConfigurer configurer) {
    }
    default void configureAsyncSupport(AsyncSupportConfigurer configurer) {
    }
    default void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
    }
    default void addFormatters(FormatterRegistry registry) {
    }
    default void addInterceptors(InterceptorRegistry registry) {
    }
    default void addResourceHandlers(ResourceHandlerRegistry registry) {
    }
    default void addCorsMappings(CorsRegistry registry) {
    }
    default void addViewControllers(ViewControllerRegistry registry) {
    }
    default void configureViewResolvers(ViewResolverRegistry registry) {
    }
    default void addArgumentResolvers(List<HandlerMethodArgumentResolver> resolvers) {
    }
    default void addReturnValueHandlers(List<HandlerMethodReturnValueHandler> handlers) {
    }
    default void configureMessageConverters(List<HttpMessageConverter<?>> converters) {
    }
    default void extendMessageConverters(List<HttpMessageConverter<?>> converters) {
    }
    default void configureHandlerExceptionResolvers(List<HandlerExceptionResolver> resolvers) {
    }
    default void extendHandlerExceptionResolvers(List<HandlerExceptionResolver> resolvers) {
    }
    @Nullable
    default Validator getValidator() {
        return null;
    }
    @Nullable
    default MessageCodesResolver getMessageCodesResolver() {
        return null;
    }
}

它的內部是具備一些處理器解析器以及映射的添加與配置的方法的，那麼我們要解決Cros跨域問題就是要考慮addCorsMappings 配置Cros映射，所以我們點進去看看這註冊Cros的CorsRegistry 的源碼：

public class CorsRegistry {
    private final List<CorsRegistration> registrations = new ArrayList();
    public CorsRegistry() {
    }
    public CorsRegistration addMapping(String pathPattern) {
        CorsRegistration registration = new CorsRegistration(pathPattern);
        this.registrations.add(registration);
        return registration;
    }
    protected Map<String, CorsConfiguration> getCorsConfigurations() {
        Map<String, CorsConfiguration> configs = CollectionUtils.newLinkedHashMap(this.registrations.size());
        Iterator var2 = this.registrations.iterator();
        while(var2.hasNext()) {
            CorsRegistration registration = (CorsRegistration)var2.next();
            configs.put(registration.getPathPattern(), registration.getCorsConfiguration());
        }
        return configs;
    }
}

從上述程式碼不難發現，內部有一個不可改變的CorsRegistration 數組鍊錶，以及增加映射的方法，主要還是看看它具備的元素CorsRegistration 含有什麼配置項：

public class CorsRegistration {
    private final String pathPattern;
    private CorsConfiguration config;
    public CorsRegistration(String pathPattern) {
        this.pathPattern = pathPattern;
        this.config = (new CorsConfiguration()).applyPermitDefaultValues();
    }
    public CorsRegistration allowedOrigins(String... origins) {
        this.config.setAllowedOrigins(Arrays.asList(origins));
        return this;
    }
    public CorsRegistration allowedOriginPatterns(String... patterns) {
        this.config.setAllowedOriginPatterns(Arrays.asList(patterns));
        return this;
    }
    public CorsRegistration allowedMethods(String... methods) {
        this.config.setAllowedMethods(Arrays.asList(methods));
        return this;
    }
    public CorsRegistration allowedHeaders(String... headers) {
        this.config.setAllowedHeaders(Arrays.asList(headers));
        return this;
    }
    public CorsRegistration exposedHeaders(String... headers) {
        this.config.setExposedHeaders(Arrays.asList(headers));
        return this;
    }
    public CorsRegistration allowCredentials(boolean allowCredentials) {
        this.config.setAllowCredentials(allowCredentials);
        return this;
    }
    public CorsRegistration maxAge(long maxAge) {
        this.config.setMaxAge(maxAge);
        return this;
    }
    public CorsRegistration combine(CorsConfiguration other) {
        this.config = this.config.combine(other);
        return this;
    }
    protected String getPathPattern() {
        return this.pathPattern;
    }
    protected CorsConfiguration getCorsConfiguration() {
        return this.config;
    }
}

我們可以發現內部是具備允許放行：請求頭，請求路徑，請求方法，請求源策略的方法的，所以我們在這裡的重寫addCorsMappings方法配置一個CorsRegistry 添加相應的路徑方法與請求策略放行不就可以解決跨域的問題了？

我們寫一個WebMvcConfig配置類別實作剛剛研究的WebMvcConfigurer介面重寫addCrosMappings設定CrosRegistry即可（或是在api與Controller控制類別上打上@CrossOrigin註解也可以解決問題（註解預設放行所有來源的請求））：

/**
 * 配置前端跨域访问请求
 */
@Configuration
public class WbMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**")
               .allowedHeaders("Content-Type","X-Request-With","Access-Control-Request-Method","Access-Control-Request-Headers","token")
               .allowedMethods("*")
               .allowedOriginPatterns("*")
               /*注意当这个配置为真是我们不能将允许源设置为*而是将源路径设置为*即可*/
               .allowCredentials(true);
    }
    @Bean
    public FormContentFilter httpPutFormContentFilter(){
        return new FormContentFilter();
    }
}

我們利用axios寫一個簡單的請求發送按鈕：

    <input type="button" value="get" class="get">
    <script>
        document.querySelector(".get").onclick = function () {
            // 跨域一般是是后端解决的事情
            axios.get("http://127.0.0.1:8080/all").then(
                function (response) {
                    console.log(response)
                }
            )
        }
    </script>

再用SpringBoot寫一個簡單的controller的api：

@RestController
public class testController {
    @Autowired
    private ProductServiceImpl productService;
    @GetMapping("/all")
    @ResponseBody
    public List<Product> all() {
        Page<Product> page = productService.page(1L);
        List<Product> productList = new LinkedList<>();
        productList.add(page.getRecords().iterator().next());
        return productList;
    }
}

這裡我們在瀏覽器開啟5050埠下的這個html檔案就可以點選按鈕存取介面了：

Springboot怎麼透過設定WebMvcConfig處理Cors非同源存取跨域問題