前言
最近在寫前後端分離項目的時候，遇到了前後端分離必須解決的跨域問題，而我起初隻是在 Controller 層加上了注解
@CrossOrigin(allowCredentials = "true")
，暫時解決了跨域問題。但是在開發驗證碼的時候，始終擷取不到session中的驗證碼字元，擷取到的驗證碼字元始終為null，調試之後發現放入驗證碼字元的session與從session中擷取驗證碼字元的session不是同一個session，這就又遇到了跨域問題，也就是說之前處理的跨域并不生效了，或者說之前并沒有完全解決前後端分離跨域問題。
一、什麼是CORS
CORS 是一個W3C标準，全稱是”跨域資源共享”（Cross-origin resource sharing），允許浏覽器向跨源伺服器，發出 XMLHttpRequest 請求，進而克服了AJAX隻能同源使用的限制。
它通過伺服器增加一個特殊的Header[Access-Control-Allow-Origin]來告訴用戶端跨域的限制，如果浏覽器支援CORS、并且判斷Origin通過的話，就會允許XMLHttpRequest發起跨域請求。
二、CORS Header
| 屬性 | 名詞解釋 |
|---|---|
| Access-Control-Allow-Origin | 允許哪個域發起跨域請求 |
| Access-Control-Allow-Methods | 設定允許跨域請求的方法 |
| Access-Control-Max-Age | 設定在多少秒内無需再發送預校驗請求 |
| Access-Control-Allow-Headers | 允許跨域請求包含content-type |
| Access-Control-Allow-Credentials | 設定允許Cookie |
三、跨域錯誤資訊
錯誤一：前、後端均無跨域處理
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-2fVp6pRd-1592127844241)(https://imgkr.cn-bj.ufileos.com/b5c15ac9-236b-48fd-b11b-b3d60ecdd88e.png)]
錯誤二：前端跨域處理，後端無跨域處理
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-7PQmloNe-1592127844244)(https://imgkr.cn-bj.ufileos.com/3a405185-f9fe-4359-be74-9a27fce4535c.png)]
錯誤三：前端無跨域處理，後端跨域處理
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-SaIEnLLY-1592127844252)(https://imgkr.cn-bj.ufileos.com/3aee8e7e-b710-4111-8d78-92a710b5cade.png)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-O3YOB0jG-1592127844256)(https://imgkr.cn-bj.ufileos.com/5205eb41-90eb-4eef-a16d-f4bc115e0129.png)]
四、跨域處理方法
前端處理方法
後端處理方法
1.在controller層加上
@CrossOrigin
注解
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-3OArBbZB-1592127844259)(https://imgkr.cn-bj.ufileos.com/7db15168-147e-46ff-9e4b-e9ad2a05313c.png)]
2.加一個全局跨域處理配置類
/**
* @description 全局跨域配置類
* @date: 2020/6/14
* @author: PeiChen
*/
@Configuration
public class GlobalCorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("PUT", "DELETE","GET","POST")
.allowedHeaders("*")
.exposedHeaders("access-control-allow-headers",
"access-control-allow-methods",
"access-control-allow-origin",
"access-control-max-age",
"X-Frame-Options")
.allowCredentials(false).maxAge(3600);
}
};
}
}
五、前後端分離成功跨域
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-hAXQlTgY-1592127844261)(https://imgkr.cn-bj.ufileos.com/cd03bb8e-3327-44ed-9be0-bb466b9a0b1c.png)]
[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-GHkwLZs9-1592127844269)(https://imgkr.cn-bj.ufileos.com/e7d01b91-f109-4321-88ea-12da8911adfa.png)]
前後端分離項目，就必須要克服跨域問題，至此，本篇文章介紹的跨域問題就先告一段落了。