springboot 跨域配置cors

逃离我推掉我的手 2022-10-02 04:45 337阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

# 1 跨域的理解 #

![1489234-20181020105311998-2000527204.png][]

跨域是指：**浏览器A**从**服务器B**获取的静态资源，包括Html、Css、Js，然后在**Js**中通过**Ajax**访问**C服务器**的静态资源或请求。即：浏览器A从B服务器拿的资源，资源中想访问服务器C的资源。

同源策略是指：**浏览器A**从**服务器B**获取的静态资源，包括Html、Css、Js，为了用户安全，浏览器加了限制，其中的**Js**通过**Ajax**只能访问**B服务器**的静态资源或请求。即：浏览器A从哪拿的资源，那资源中就只能访问哪。

同源是指：同一个请求协议(如：Http或Https)、同一个Ip、同一个端口，3个全部相同，即为同源。

# 2 跨域的处理 #

跨域的这种需求还是有的，因此，[W3C][]组织制定了一个[Cross-Origin Resource Sharing][]规范，简写为`Cors`，现在这个规范已经被大多数浏览器支持，从而，处理跨域的需求。

Cors需要在后端应用进行配置，因此，是一种跨域的后端处理方式，这么做也容易理解，一个你不认识的源来访问你的应用，自然需要应用进行授权。除了后端处理方式，也有前端的解决方案，如：JSONP，因这里我们主要讲解SpringBoot2.x对Cors的配置，暂不对前端解决方案进行详细说明。

# 3 跨域的分类 #

跨域分为以下3种

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>英文名</th> 
   <th>说明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>简单请求</td> 
   <td>Simple Request</td> 
   <td>发起的Http请求符合：<br> 1.无自定义请求头，<br> 2.请求动词为GET、HEAD或POST之一，<br> 3.动词为POST时，Content-Type是application/x-www-form-urlencoded，<br> multipart/form-data或text/plain之一</td> 
  </tr> 
  <tr> 
   <td>预检请求</td> 
   <td>Preflighted Request</td> 
   <td>发起的Http请求符合其中之一：<br> 1.包含了自定义请求头，<br> 2.请求动词不是GET、HEAD或POST，<br> 3.动词是POST时， Content-Type不是application/x-www-form-urlencoded，<br> multipart/form-data或text/plain。 即：简单请求的相反</td> 
  </tr> 
  <tr> 
   <td>凭证请求</td> 
   <td>Requests with Credential</td> 
   <td>发起的Http请求中带有凭证</td> 
  </tr> 
 </tbody> 
</table>

# 4 SpringBoot2.x配置Cors #

@RestController
    @RequestMapping(value = "/api/users")
    @CrossOrigin
    public class UsersController{
    
        @Autowired
        private UsersService usersService;
    
        @PostMapping
        @CrossOrigin
        public User create(@RequestBody User user) {
            return userService.save(user);
        }
    }

其中，@CrossOrigin注解可以使用以下参数

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>范围</th> 
   <th>必填</th> 
   <th>请求头字段</th> 
  </tr> 
 </tbody> 
 <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属性：配置允许访问的源，如: http://anxminise.cc，`*`表示允许全部的域名
2.  methods属性：配置跨域请求支持的方式，如：GET、POST，且一次性返回全部支持的方式
3.  maxAge属性：配置预检请求的有效时间， 单位是秒，表示：在多长时间内，不需要发出第二次预检请求
4.  allowCredentials属性：配置是否允许发送Cookie，用于 凭证请求， 默认不发送cookie
5.  allowedHeaders属性：配置允许的自定义请求头，用于 预检请求
6.  exposedHeaders属性：配置响应的头信息， 在其中可以设置其他的头信息，不进行配置时， 默认可以获取到Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma字段

##  使用WebMvcConfigurer对象 ##

@Configuration
    public class MyConfiguration {
    
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurer() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/api/**")
                              .allowedOrigins("*")  
                              .allowCredentials(true)
                              .allowedMethods("GET", "POST", "DELETE", "PUT","PATCH")
                              .maxAge(3600);  
                }
            };
        }
    }

或者这个方式：

@Configuration
    public class WebMvcConfig implements WebMvcConfigurer {
    	@Override
    	public void addViewControllers(ViewControllerRegistry registry) {
    		registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                    .maxAge(3600)
                    .allowCredentials(true);
    	}
    }

其中，通过相应的方法实现跨域请求的配置

<table> 
 <tbody> 
  <tr> 
   <th>方法类</th> 
   <th>方法名称</th> 
   <th>必填</th> 
   <th>请求头字段</th> 
   <th>说明</th> 
  </tr> 
 </tbody> 
 <tbody> 
  <tr> 
   <td>CorsRegistry</td> 
   <td>addMapping</td> 
   <td>是</td> 
   <td>无, 非Cors属性,&nbsp;<br> 属于SpringBoot配置</td> 
   <td>配置支持跨域的路径</td> 
  </tr> 
  <tr> 
   <td>CorsRegistration</td> 
   <td>allowedOrigins</td> 
   <td>是</td> 
   <td>Access-Control-Allow-Origin</td> 
   <td>配置允许的源</td> 
  </tr> 
  <tr> 
   <td>CorsRegistration</td> 
   <td>allowedMethods</td> 
   <td>是</td> 
   <td>Access-Control-Allow-Methods</td> 
   <td>配置支持跨域请求的方法,&nbsp;<br> 如：GET、POST，一次性返回</td> 
  </tr> 
  <tr> 
   <td>CorsRegistration</td> 
   <td>maxAge</td> 
   <td>否</td> 
   <td>Access-Control-Max-Age</td> 
   <td>配置预检请求的有效时间</td> 
  </tr> 
  <tr> 
   <td>CorsRegistration</td> 
   <td>allowCredentials</td> 
   <td>否</td> 
   <td>Access-Control-Allow-Credentials</td> 
   <td>配置是否允许发送Cookie, 用于 凭证请求</td> 
  </tr> 
  <tr> 
   <td>CorsRegistration</td> 
   <td>allowedHeaders</td> 
   <td>否</td> 
   <td>Access-Control-Request-Headers</td> 
   <td>配置允许的自定义请求头, 用于 预检请求</td> 
  </tr> 
  <tr> 
   <td>CorsRegistration</td> 
   <td>exposedHeaders</td> 
   <td>否</td> 
   <td>Access-Control-Expose-Headers</td> 
   <td>配置响应的头信息,&nbsp;<br> 在其中可以设置其他的头信息</td> 
  </tr> 
 </tbody> 
</table>

转载于:https://my.oschina.net/duanvincent/blog/3055964

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/403d1c6b5d42455099cf7e546a71c14c.png
[1489234-20181020105311998-2000527204.png]: /images/20220113/9dab757fb63e462194c7822d18892cbc.png
[W3C]: https://www.w3.org/
[Cross-Origin Resource Sharing]: https://www.w3.org/TR/cors/