1.何為前后端對接?

“前后端對接”
是指前端和后端兩個不同的軟件組件或系統(tǒng)之間的協(xié)作和交互過程。在軟件開發(fā)中，通常將應(yīng)用程序劃分為前端和后端兩個主要部分，它們各自負(fù)責(zé)不同的任務(wù)和功能：

🌴 前端：前端是用戶與應(yīng)用程序直接交互的部分，通常包括用戶界面（UI）和用戶體驗(yàn)（UX）。前端通常運(yùn)行在用戶的設(shè)備上，例如Web瀏覽器、移動應(yīng)用程序或桌面應(yīng)用程序。前端的主要任務(wù)包括呈現(xiàn)數(shù)據(jù)、收集用戶輸入、處理用戶交互以及向用戶展示信息。前端通常使用HTML、CSS和JavaScript等技術(shù)來創(chuàng)建用戶界面。

🌴 后端：后端是應(yīng)用程序的服務(wù)器端組件，它負(fù)責(zé)處理前端發(fā)送的請求并執(zhí)行相應(yīng)的操作。后端通常包括數(shù)據(jù)庫、服務(wù)器、業(yè)務(wù)邏輯和應(yīng)用程序的核心功能。它處理數(shù)據(jù)存儲、驗(yàn)證、安全性、性能和業(yè)務(wù)規(guī)則等方面的問題。

“前后端對接”
涉及將前端和后端協(xié)調(diào)工作，以實(shí)現(xiàn)應(yīng)用程序的完整功能。這包括通過API（應(yīng)用程序編程接口）或其他通信方式進(jìn)行數(shù)據(jù)交換、數(shù)據(jù)驗(yàn)證、身份驗(yàn)證和授權(quán)，以及確保前端和后端的數(shù)據(jù)和狀態(tài)同步。

通常情況下，前后端之間的交互是通過HTTP協(xié)議進(jìn)行的。HTTP（Hypertext Transfer Protocol）是一種用于在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的協(xié)議，廣泛用于Web應(yīng)用程序中。通過HTTP，前端可以向后端發(fā)起請求，并接收來自后端的響應(yīng)。

2.對接中關(guān)于http的關(guān)鍵點(diǎn)

前端需要經(jīng)常請求的信息就是http請求

請求消息（HTTP Request Message）：

• 🌴 請求行（Request Line）：包括請求方法（GET、POST、PUT，DELETE等）、請求的資源路徑（URL）和協(xié)議版本（HTTP/1.1等）。

• 🌴 請求頭部（Request Headers）：包含關(guān)于請求的元信息，如User-Agent（用戶代理）、Host（主機(jī)）、Content-Type（內(nèi)容類型）等。

• 空行（Empty Line）：請求頭部與消息主體之間需要有一個空行。

• 🌴 消息主體（Message Body）：可選的，包含發(fā)送到服務(wù)器的數(shù)據(jù)，通常在POST請求中使用，例如表單數(shù)據(jù)或JSON數(shù)據(jù)。

前端中我們需要經(jīng)常對請求頭，請求體，以及請求方式進(jìn)行修改處理，最后發(fā)送到后端接口處

2.1. 請求方法

1. get請求，一般數(shù)據(jù)參數(shù)僅包含query參數(shù)

axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}).then(function () {// 總是會執(zhí)行});  

2. post請求，和get相比可以攜帶請求體。一般表示提交

//在axios中默認(rèn)的請求數(shù)據(jù)時json
axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

3. put請求，用法和post類似，一般表示修改。
4. delete請求，用法和post類似，一般表示刪除。

2.2. 請求參數(shù)設(shè)置簡解：

實(shí)際上除了get和query參數(shù)幾乎算綁定關(guān)系之外，其他三種類型請求，可以自定義請求參數(shù)。

1. 🌴 query參數(shù)：只在get請求中使用，具體實(shí)現(xiàn)拼接到url中，一般不需要額外的請求設(shè)置。

在get請求中參數(shù)一般通過拼接url時間如果是幾個參數(shù)的時候可以增加&符號
如

localhost:8080/api/test?name=admin&password=admin

而在springboot中可以

    @GetMapping("/test")public String test(String name){log.info("測試接口被訪問");return name;}

這要保證變量名和前端傳遞的變量名一致，這樣springboot可以幫你自動映射到你的變量里。

2. body參數(shù)：

• 🌴 json參數(shù)：是axios默認(rèn)發(fā)送的類型，如果使用axios不需要任何額外的設(shè)置，直接傳遞參數(shù)即可。

請求頭需要添加'Content-Type: application/json'

//json的結(jié)構(gòu)
{"name" ："admin"，"password" ："admin"
}

由于json實(shí)際上是一個字符串，所以只能映射到一個變量里，如果前端結(jié)構(gòu)變量和后端一直，可以通過@RequestBody解析到對象里。

• 🌴 URLSearchParams 參數(shù)
  URLSearchParams參數(shù)是n對鍵值對的形式，和query差不多，但是是在body中，可以說是query的post翻版請求頭需要application/x-www-form-urlencoded

export const createFolder = (newPath : string) => {const prams = new URLSearchParams();prams.append('newPath',newPath);return service<any, ApiResponse>({ url: baseURL + '/createFolder',method: 'post','data': prams,headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
}

@RequestParam("name")可以把前端變量注入到后端變量里，防止變量名沖突

• 🌴 FormData參數(shù)
  有沒有發(fā)現(xiàn)上面都是傳輸簡單字符串的，那么這個就是傳文件的，FormData參數(shù)是類似鍵值對的形式，但是可以傳輸文件

//調(diào)用接口
const formData = new FormData();formData.append('file', file); // 這里可以根據(jù)需要設(shè)置其他表單字段formData.append('path',currentPath);uploadImg(formData).then((res) => {if(res.statusCode === 200){ElMessage.success('上傳成功');flushTableData();refUpload.value.clearFiles();}//前端上傳api
export const uploadImg = (formData:FormData) => {return service<any, ApiResponse>({ url: baseURL + '/uploadImg',method: 'post','data': formData,headers: {'Content-Type': 'multipart/form-data'}})
}

3.對接中的跨域(CROS)問題

什么時候會發(fā)生跨域問題？

跨域（Cross-Origin）是指在 Web
開發(fā)中，當(dāng)一個網(wǎng)頁的源（Origin）與另一個網(wǎng)頁的源不同，即它們的協(xié)議（HTTP/HTTPS）、主機(jī)（Domain）或端口號不同時，就會發(fā)生跨域問題

實(shí)際上概念大家都知道，不過有時候跨域有時候不跨摸不著頭腦。

跨域預(yù)請求（Preflight Request）是在跨域請求中的一種特殊情況，它通常發(fā)生在滿足以下條件的情況下：

• 🌴 使用非簡單請求方法：跨域請求中，如果使用了非簡單請求方法，例如PUT、DELETE、OPTIONS、PATCH等，且請求包含了自定義的請求頭（非簡單請求頭），那么瀏覽器會自動發(fā)起一個跨域預(yù)請求，以獲取服務(wù)器是否允許實(shí)際請求的權(quán)限。
• 🌴 非簡單請求頭：跨域請求中，如果請求中包含了自定義的請求頭字段，例如"Authorization"、"X-Requested-With"等，而這些請求頭字段不在瀏覽器的預(yù)定義白名單內(nèi)，也會觸發(fā)跨域預(yù)請求。
• 🌴 跨域請求條件：跨域預(yù)請求通常與跨域請求（例如跨域AJAX請求）相關(guān)。這意味著請求的源（Origin）、協(xié)議（HTTP/HTTPS）、端口號（Port）等與當(dāng)前頁面的源不同。

跨域預(yù)請求的主要目的是確保服務(wù)器允許跨域請求，以避免潛在的安全風(fēng)險。在跨域預(yù)請求中，瀏覽器會自動發(fā)起一個OPTIONS請求，這個OPTIONS請求包含了用于驗(yàn)證服務(wù)器是否支持跨域請求的信息，例如請求方法和請求頭字段。

那么，如果是簡單請求的話，即便跨域，也可能可以正常發(fā)送數(shù)據(jù)。

為什么后端處理跨域盡量在業(yè)務(wù)之前進(jìn)行？

我有一次在token驗(yàn)證，攔截了正常的跨域請求，我配置了跨域處理，請問為什么，無法正常使用接口？

答：因?yàn)槲以谶^濾器處理的token，攔截器處理的跨域。

那么答案顯然易見，跨域的option請求被token過濾器所攔截，攔截器等于無效狀態(tài)。

解決方案有兩個，

1. 要么把跨域處理放到過濾器放到token過濾器之前
2. 把token處理放到攔截器放到跨域處理之后。

核心邏輯是： 跨域數(shù)據(jù)屬于http邏輯處理，一般情況盡量在業(yè)務(wù)之前處理完畢。

3.總結(jié)

這篇文章我主要總結(jié)了：前端參數(shù)請求頭意義，后端接受參數(shù)的注解，以及跨域的流程，如何處理跨域。