Springboot怎么通過配置WebMvcConfig處理Cors非同源訪問跨域問題

這篇文章主要介紹了Springboot怎么通過配置WebMvcConfig處理Cors非同源訪問跨域問題的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Springboot怎么通過配置WebMvcConfig處理Cors非同源訪問跨域問題文章都會有所收獲，下面我們一起來看看吧。

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

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

請求發送到服務器端時是由我們的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非同源訪問跨域問題”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Springboot怎么通過配置WebMvcConfig處理Cors非同源訪問跨域問題”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。