Spring Boot 使用配置接口WebMvcConfigurer 解决跨域问题

缺乏、安全感 2023-01-11 01:23 207阅读 0赞

### 1、问题描述：前端调用接口出现跨域问题 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWhhbzExODY_size_16_color_FFFFFF_t_70][]

### 2、解决方案，添加如下类 ###

import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    public class CorsConfiguration {
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/**")
                            .allowCredentials(true)
                            .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                            .allowedOrigins("*");
                }
            };
        }
    
    }

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>范围</th> 
   <th>必填</th> 
   <th>请求头字段</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>String数组</td> 
   <td>类或方法</td> 
   <td>是</td> 
   <td>Access-Control-Allow-Origin</td> 
  </tr> 
  <tr> 
   <td>origins</td> 
   <td>String数组</td> 
   <td>类或方法</td> 
   <td>是，同value，可以二选一</td> 
   <td>Access-Control-Allow-Origin</td> 
  </tr> 
  <tr> 
   <td>methods</td> 
   <td>String数组</td> 
   <td>类或接口</td> 
   <td>是</td> 
   <td>Access-Control-Allow-Methods</td> 
  </tr> 
  <tr> 
   <td>maxAge</td> 
   <td>long</td> 
   <td>类或接口</td> 
   <td>否</td> 
   <td>Access-Control-Max-Age</td> 
  </tr> 
  <tr> 
   <td>allowCredentials</td> 
   <td>String</td> 
   <td>类或接口</td> 
   <td>否</td> 
   <td>Access-Control-Allow-Credentials</td> 
  </tr> 
  <tr> 
   <td>allowedHeaders</td> 
   <td>String数组</td> 
   <td>类或接口</td> 
   <td>否</td> 
   <td>Access-Control-Request-Headers</td> 
  </tr> 
  <tr> 
   <td>exposedHeaders</td> 
   <td>String数组</td> 
   <td>类或接口</td> 
   <td>否</td> 
   <td>Access-Control-Expose-Headers</td> 
  </tr> 
 </tbody> 
</table>

说明：

1）属性value、origins：配置允许访问的源，比如：[https://adong.blog.csdn.net/article/details/113126033][https_adong.blog.csdn.net_article_details_113126033] `*`表示允许全部域名。

2）属性methods：配置跨域请求支持的方式，如：GET、POST、DELETE、PUT，并且一次性返回全部支持的方式。

3）属性maxAge：配置预检请求的有效时间， 单位是秒，表示：在多长时间内，不需要发出第二次预检请求。

4）属性allowCredentials：配置是否允许发送Cookie，用于凭证请求， 默认不发送cookie。

5）属性allowedHeaders：配置允许的自定义请求头，用于 预检请求。

6）属性exposedHeaders：配置响应的头信息， 在其中可以设置其他的头信息，不进行配置时， 默认可以获取到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma字段。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYWhhbzExODY_size_16_color_FFFFFF_t_70]: /images/20221119/405d4737c259425aa08ff43865ecdfcf.png
[https_adong.blog.csdn.net_article_details_113126033]: https://adong.blog.csdn.net/article/details/113126033