CORS (Cross-Origin Resource Sharing）是由W3C制定的一種跨域資源共享技術標準，其目的就是爲了解決前端的跨域請求。最常見的前端跨域請求解決方案是JSONP，但 是JSONP只支持 GET 請求，這是一個很大的缺陷，而CORS則支持多種HTTP請求方法。
一、CORS跨域請求過程
1、GET、POST和HEAD請求
以get爲例，瀏覽器發送請求時，請求頭Request攜帶參數：
如果服務端支持CORS，則服務端會給出響應信息：
其中Access-Control-Allow-Origin，用來記錄可以訪問該資源的域。當瀏覽器收到這樣的響應頭信息之後，提取出Access-Control-Allow-Origin字段中的值，發現該值包含當前頁面所在的域，就會允許這個跨域請求，不再限制。
整個流程就一步，只需要對後端代碼進行處理。這個流程主要針對GET、POST以及HEAD請求，並且沒有自定義請求頭。
2、DELET、PUT及自定義請求頭的請求
以put請求爲例，整個請求處理會經過兩個步驟：探測請求、真正的請求
①發送一個OPTIONS請求 - 探測請求
這個請求會向服務端詢問是否具備PUT權限，服務端給瀏覽器一個響應
瀏覽器分析請求頭字段，發現是支持的請求，則進入第二步。
②發送PUT請求
服務端響應：
到此爲止，PUT請求完成。
二、SpringBoot使用CORS
實際上使用的就是Spring的@CrossOrigin註解。
1、創建一個SpringBoot工程 - 8080端口
①controller層配置跨域 - 方法註解跨域
value：支持的域
maxAge：探測請求有效期，默認1800秒，即在完成一次請求後的30分鐘內不再需要發送探測請求
allowedHeaders：允許的請求頭，*表示所有請求頭都允許
@RestController
public class StudentController {
@GetMapping("/getCors")
@CrossOrigin(value = "http://localhost:8081",maxAge = 1800,allowedHeaders = "*")
public String getCors(String name){
return "收到Get請求：" + name;
}
@PutMapping("/putCors")
@CrossOrigin(value = "http://localhost:8081",maxAge = 1800,allowedHeaders = "*")
public String putCors(String name){
return "收到Put請求：" + name;
}
②全局配置跨域
第一種方法通過在方法上面添加@CrossOrigin方法來進行跨越處理，另外一種做法是通過實現WebMvcConfigurer接口的addCorsMappings方法進行全局控制。
@Configuration
public class MyWebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/getCors")
.allowedHeaders("*") // 允許的請求頭，*表示允許所有
.allowedMethods("*") // 允許的方法，默認是GET、POST、HEAD,*表示所有
.maxAge(1800) // 探測請求有效期
.allowedOrigins("http://localhost:8081"); // 支持的域
}
2、創建SpringBoot工程 - 8081端口
在resources/static文件下創建html文件，用於發送請求。
<body>
<div id="getDiv"></div>
<div id="putDiv"></div>
<input type="button" value="發送GET請求" onclick="getData()"><br>
<input type="button" value="發送PUT請求" onclick="putData()">
<script src="js/jquery.min.js"></script>
<script>
function getData() {
$.ajax({
url:"http://localhost:8080/getCors",
type:'get',
data:{name:'GET跨域請求'},
success:function (msg) {
$("#getDiv").html(msg);
}
})
}
function putData() {
$.ajax({
url:"http://localhost:8080/putCors",
type:'put',
data:{name:'PUT跨域請求'},
success:function (msg) {
$("#putDiv").html(msg);
}
})
}
</script>
</body>
3、測試結果
發送請求之前：
發送請求之後：
