OPTIONS预检请求

CORS同源策略

在 CORS 同源策略机制中，客户端将请求分为了两种：简单请求和非简单请求；当请求为非简单请求时，就会触发浏览器发送预检请求，这是浏览器的行为。

简单请求

1、只使用以下HTTP方法之一：GET、HEAD或POST。
2、只使用以下HTTP头部：Accept、Accept-Language、Content-Language、Content-Type。
3、Content-Type的值仅限于：application/x-www-form-urlencoded、multipart/form-data或text/plain。

非简单请求

一个 POST 请求并且请求头添加了Content-Type: application/json

解决方案

在响应头的Access-Control-Allow-Origin （访问控制允许来源 ）写上*或者客户端的ip，如：
需要注意的是Origin的值是浏览器地址栏的值而不是客户端ip

配置跨域过滤器

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
 public CorsConfig() {
 }
 @Bean
 public CorsFilter corsFilter() {
 // 1. 添加cors配置信息
 CorsConfiguration config = new CorsConfiguration();
 // Response Headers里面的Access-Control-Allow-Origin: http://localhost:8080
 config.addAllowedOrigin("http://localhost:8080");
 // 其实不建议使用*，允许所有跨域
 config.addAllowedOrigin("*");
 // 设置是否发送cookie信息，在前端也可以设置axios.defaults.withCredentials = true;表示发送Cookie,
 // 跨域请求要想带上cookie，必须要请求属性withCredentials=true，这是浏览器的同源策略导致的问题：不允许JS访问跨域的Cookie
 /**
         * withCredentials前后端都要设置，后端是setAllowCredentials来设置
         * 如果后端设置为false而前端设置为true，前端带cookie就会报错
         * 如果后端为true，前端为false，那么后端拿不到前端的cookie，cookie数组为null
         * 前后端都设置withCredentials为true，表示允许前端传递cookie到后端。
         * 前后端都为false，前端不会传递cookie到服务端，后端也不接受cookie
         */
 // Response Headers里面的Access-Control-Allow-Credentials: true
 config.setAllowCredentials(true);
 // 设置允许请求的方式，比如get、post、put、delete，*表示全部
 // Response Headers里面的Access-Control-Allow-Methods属性
 config.addAllowedMethod("*");
 // 设置允许的header
 // Response Headers里面的Access-Control-Allow-Headers属性，这里是Access-Control-Allow-Headers: content-type, headeruserid, headerusertoken
 config.addAllowedHeader("*");
 // Response Headers里面的Access-Control-Max-Age:3600
 // 表示下回同一个接口post请求，在3600s之内不会发送options请求，不管post请求成功还是失败，3600s之内不会再发送options请求
 // 如果不设置这个，那么每次post请求之前必定有options请求
 config.setMaxAge(3600L);
 // 2. 为url添加映射路径
 UrlBasedCorsConfigurationSource corsSource = new UrlBasedCorsConfigurationSource();
 // /**表示该config适用于所有路由
 corsSource.registerCorsConfiguration("/**", config);
 // 3. 返回重新定义好的corsSource
 return new CorsFilter(corsSource);
 }
}

拓展：后端允许携带cookie需要把Credentials设置为true

详细文章