一、SpringBoot 跨域设置

方便拿来用的同学使用，详细的请往下看。

@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {CorsConfiguration htmlGet = new CorsConfiguration();htmlGet.addAllowedOrigin("*");htmlGet.setAllowCredentials(true);htmlGet.addAllowedMethod("*");htmlGet.addAllowedHeader("*");htmlGet.addExposedHeader("*");UrlBasedCorsConfigurationSource corsConfigurationSource= new UrlBasedCorsConfigurationSource();corsConfigurationSource.registerCorsConfiguration("/**", htmlGet);return new CorsFilter(corsConfigurationSource);}
}

二、CORS

跨域访问资源其实就是浏览器通过自身的权限，控制HTTP请求访问服务器资源，服务器和浏览器是基于HTTP请求头进行交流，例如：服务器通过Access-Control-Allow-Origin、Access-Control-Allow-Methods等类似的请求头告诉浏览器，我这个资源只能特定的源、某一组method才能进行访问。总结来说：服务器基于HTTP头声明哪些源通过浏览器的权限能访问服务器的哪些资源。

（1）总结的图如下

CORS权限验证的流程有两种，分别是简单请求和预检。

简单请求可以直接发起请求。
不是简单请求则需要预检，预检没问题之后才会发起真正的请求。

在这里插入图片描述

（2）简单请求满足的条件

使用下列方法之一：
- GET
- HEAD
- POST
除了被用户代理自动设置的标头字段（例如 Connection、User-Agent 或其他在 Fetch 规范中定义为禁用标头名称的标头），允许人为设置的字段为 Fetch 规范定义的对 CORS 安全的标头字段集合。该集合为：
- Accept
- Accept-Language
- Content-Language
- Content-Type（需要注意额外的限制）
- Range（只允许简单的范围标头值如 bytes=256- 或 bytes=127-255）

Content-Type 标头所指定的媒体类型的值仅限于下列三者之一：
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
如果请求是使用 XMLHttpRequest 对象发出的，在返回的 XMLHttpRequest.upload 对象属性上没有注册任何事件监听器；也就是说，给定一个 XMLHttpRequest 实例 xhr，没有调用 xhr.upload.addEventListener()，以监听该上传请求。
请求中没有使用 ReadableStream 对象。

（3）响应头

Access-Control-Allow-Origin

告诉浏览器允许访问的源。

Access-Control-Expose-Headers

XMLHttpRequest.getResponseHeader可以访问的请求头，如果不设置只能访问Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。

Access-Control-Max-Age
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
Access-Control-Allow-Headers

（4）请求头

这些请求头都是浏览器自己设置的，不能通过正常的API更改。

Origin
Access-Control-Request-Method
Access-Control-Request-Header

（5）使用XMLHttpRequest进行跨域访问

API

@RequestMapping("/cors")
@RestController
public class CorsController {@GetMapping(value = "/html")public String html(HttpServletResponse response) {return "<div>GET</div>";}@DeleteMapping(value = "/delete")public String delete(HttpServletResponse response) {return "<div>DELETE</div>";}
}

1. Access-Control-Allow-Methods

function get() {const xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8080/cors/html')xhr.onreadystatechange = function() {console.log('status', xhr.readyState)}xhr.send();
}

@Bean
public CorsFilter corsFilter() {CorsConfiguration htmlGet = new CorsConfiguration();htmlGet.addAllowedOrigin("null");htmlGet.addAllowedMethod("DELETE");UrlBasedCorsConfigurationSource corsConfigurationSource= new UrlBasedCorsConfigurationSource();corsConfigurationSource.registerCorsConfiguration("/cors/html", htmlGet);return new CorsFilter(corsConfigurationSource);
}

可以看到CORS异常了，XMLHTTPRequest请求是GET，服务器Access-Control-Allow-Methods是DELETE，换成人话说：服务器只允许DELETE请求。

在这里插入图片描述

把htmlGet.addAllowedMethod("DELETE"); 改成htmlGet.addAllowedMethod("GET");

在这里插入图片描述

2. Access-Control-Allow-Headers

function get() {const xhr = new XMLHttpRequest();xhr.open('GET', 'http://localhost:8080/cors/html')xhr.onreadystatechange = function() {console.log('status', xhr.readyState)}xhr.setRequestHeader('headxxx', 'a');xhr.send();
}

@Bean
public CorsFilter corsFilter() {CorsConfiguration htmlGet = new CorsConfiguration();htmlGet.addAllowedOrigin("null");htmlGet.addAllowedMethod("DELETE");htmlGet.addAllowedHeader("Token");UrlBasedCorsConfigurationSource corsConfigurationSource= new UrlBasedCorsConfigurationSource();corsConfigurationSource.registerCorsConfiguration("/cors/html", htmlGet);return new CorsFilter(corsConfigurationSource);
}