vue和springboot交互數據，使用axios【跨域問題】

提示：幫幫志會陸續更新非常多的IT技術知識，希望分享的內容對您有用。本章分享的是node.js和vue的使用。前后每一小節的內容是存在的有：學習and理解的關聯性。【幫幫志系列文章】：每個知識點，都是寫出代碼和運行結果且前后關聯上的去分析和說明（能大量節約您的時間）。

所有文章都*不會*直接把代碼放那里，讓您自己去看去理解。我希望我的內容對您有用而努力~

---

---

本文章是系列文章，技術棧內容為：【springboot+vue】【前后分離】
【詳細圖文，實操步驟分享，節約時間版】。最終完成一個商業化項目。內容有：
springboot知識
mybatisPlus知識
vue知識
node.js知識

本小節的內容是：
vue篇章 之 ： vue和springboot交互數據，使用axios【解決跨域問題】

---

---

每一個文章小節都會把 標題 說的很清楚。前后關聯看，可以快速實現：前后分離。本質上，額外文章鏈接和文章自己標題內容關系不大。

前面小節文章已經實現springboot的創建，springboot關聯前端數據swagger和springboot通過mybatisplus操作數據庫：
【2025年】基于電腦的jdk1.8通過idea創建springboot2.x版本(非常簡潔快速)
【上榜文章，一文搞定】現在springboot是3.x以上版本，jdk版本至少要求17.但是很多時候我們電腦是jdk1.8(求穩定性和安全性)。文本分享本機電腦1.8的jdk。idea如何非常簡潔快速的創建springboot
文章里面也有 為什么只能是jdk17起和地址指定為阿里云報錯的解決辦法

---

---

---

本文章是重點描述：跨域問題
本文章是重點描述：跨域問題：不是一個同源數據，不能訪問讀寫對方的資源
本文章是重點描述：同源策略是約定，是瀏覽器最核心最基本的安全問題

前面小節已經安裝好node.js和分享了一些vue語法，及RESTful風格及安裝配置swagger使用，和：
vue實現與后臺springboot傳遞數據【傳值/取值 Axios 】
這個文章是 Axios 詳細語法和實現步驟
里面算是總結當前系列的所有代碼匯總：有前端vue的，有后臺springboot的。包括實際axios的語法
【它也是上榜文章，可以一看：里面有axios的快速實現代碼】

鏈接文章里面：直接是實現Axios的案例解決方案(代碼實例),代碼已經直接解決了跨域，當然也標注了注釋。沒有那些代碼的話，一直取不到數據。但是那個文章并沒有詳細去描述跨域問題。如果不解決跨域，就存在同源策略的問題：

---

前言

如果不解決跨域，就存在同源策略的問題
vue里面的axios 和 springboot里面的controller寫在多都沒有用。它不能交互數據

什么是同源策略：
所謂同源：即指向同一個域。就是兩個頁面具有相同的協議：主機(ip地址) 和 端口號(port)

當一個請求url的協議(http)，域名(ip地址)，**端口(port)**三者之間有任何一個與當前頁面url不同，即為跨域。
此時無法讀取非同源網頁的cookie和無法向非同源地址發送ajax請求。

目前我們的項目：
node啟動vue前端項目，端口是8080
idea啟動springboot自帶的tomcat，端口是8081
不管怎么樣，是多少。它們兩個端口都不是同一個，在程序和協議眼里，就是兩個項目，兩個地址。即為跨域

為了保證數據和瀏覽器的安全，全行業遵循：
不同源的客戶端和url地址，在-沒有-明確授權的情況下，不能讀寫對方的資源
很好理解和熟知：咱不能自己打開一個網站url，它就能把其他網站url的傳輸數據讀取了，不可能。行業對于安全之一最基礎的就是現在分享的同源策略

---

CORS

CORS（Cross-Origin Resource Sharing） 是由W3C制定的一種跨域資源共享技術標準，其目的就是為了解決當前的跨域請求
CORS可以在不破壞即有規則的情況下，去通過后端服務器實現CORS接口，從而實現跨域通信。
CORS將請求分為兩類：簡單請求和非簡單請求，分別對跨域通信提供了支持。

簡單請求

滿足以下條件就是簡單請求：
請求方法/提交方式：GET POST HEAD
除了以下請求頭字段之外，沒有自定義的請求頭：
Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type
Content-Type的值 -只有- 以下三種：
text/plain multipart/form-data application/x-www-form-urlencoded

簡單請求的服務器處理
對于簡單請求，CORS的策略是請求時在請求頭中添加一個Origin字段：

假設有一個網頁https://example.com
需要從API服務https://api.example.com/data獲取數據
由于這個請求滿足簡單請求的條件，瀏覽器會直接發送請求 (請求頭request head) ：

GET /data HTTP/1.1 Host: api.example.com Origin: https://example.com
做項目的時候 網頁修改為ip地址一樣的

服務器接收到請求之后，根據該字段判斷是否允許這個請求的訪問，如果允許，就在HTTP頭中添加 Access-Control-Allow-Origin 字段
(相應response：)
HTTP/1.1 200 OK Access-Control-Allow-Origin: https://example.com Content-Type: application/json { “data”: “Sample data” }

非簡單請求

不滿足上述條件的請求即為非簡單請求。例如，使用PUT、DELETE等方法，或者POST方法包含除Content-Type和Accept之外的其他頭信息。
對于非簡單請求，瀏覽器會先發送一個OPTIONS請求（預檢請求）到服務器，以確認服務器是否允許跨域請求。
稱為預檢請求(preflight request)
預檢請求將真實信息：請求方法，自定義字段，源信息添加到HTTP頭信息中，詢問服務器是否允許這樣的操作。

?服務器響應預檢請求?：服務器需要在響應中包含以下信息：
Access-Control-Allow-Origin：指定哪些源可以訪問資源。
Access-Control-Allow-Methods：指定允許的方法。
Access-Control-Allow-Headers：指定允許的頭信息。

實際請求?：如果預檢請求成功，瀏覽器會發送實際的非簡單請求，服務器需要按照預檢響應中的設置進行處理。

代碼編寫(解決方式)

簡單請求和非簡單請求
是瀏覽器層面的處理方式(打開瀏覽器開發者工具，查詢network網絡，可以看到請求頭…和響應…)。
一般開發里面，我們去springboot后臺服務器添加對應的代碼：

springboot中配置CORS
編寫一個工具類:

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("*/**") //允許跨域訪問的路徑.allowedOrigins("*") //允許跨域訪問的源.allowedMethods("GET","POST","PUT","OPTIONS","DELETE") //允許請求的方式.maxAge(1000000)    //預檢的時間.allowedHeaders("*") //允許頭部設置.allowCredentials(true); //是否發送cookie}
}// 工具類   可以配置的很細節 
// 目前是基本全部權限都放開了：(如果您感覺前后分離，有跨域問題，可以直接復制)

不想使用工具類，在對應的某一個controller類上面，加@CrossOrigin：
表示：這個類里面的方法路徑，都允許跨域訪問，沒有配置類里面寫的那么細節

@RestController
@CrossOrigin
public class UserController {}

---

總結

說明一下：整個這個系列實現前后分離的springboot+vue項目。序號文章一共也就10幾篇，只有核心圖文重點操作步驟來實現這個目標(基本上您邊看邊寫：一個小時或者一上午就能跟著一起手搓一個前后分離項目，然后您可以自行添加功能和內容在您項目里面)

（會陸續更新非常多的IT技術知識及泛IT的電商知識，可以點個關注，共同交流。?( ′･?･` )比心）
（也歡迎評論，提問。 我會依次回答~）