1.何為前后端對(duì)接?

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

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

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

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

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

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

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

請(qǐng)求消息（HTTP Request Message）：

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

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

• 空行（Empty Line）：請(qǐng)求頭部與消息主體之間需要有一個(gè)空行。

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

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

2.1. 請(qǐng)求方法

1. get請(qǐng)求，一般數(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 () {// 總是會(huì)執(zhí)行});  

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

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

3. put請(qǐng)求，用法和post類(lèi)似，一般表示修改。
4. delete請(qǐng)求，用法和post類(lèi)似，一般表示刪除。

2.2. 請(qǐng)求參數(shù)設(shè)置簡(jiǎn)解：

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

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

在get請(qǐng)求中參數(shù)一般通過(guò)拼接url時(shí)間如果是幾個(gè)參數(shù)的時(shí)候可以增加&符號(hào)
如

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

而在springboot中可以

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

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

2. body參數(shù)：

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

請(qǐng)求頭需要添加'Content-Type: application/json'

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

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

• 🌴 URLSearchParams 參數(shù)
  URLSearchParams參數(shù)是n對(duì)鍵值對(duì)的形式，和query差不多，但是是在body中，可以說(shuō)是query的post翻版請(qǐng)求頭需要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ù)
  有沒(méi)有發(fā)現(xiàn)上面都是傳輸簡(jiǎn)單字符串的，那么這個(gè)就是傳文件的，FormData參數(shù)是類(lèi)似鍵值對(duì)的形式，但是可以傳輸文件

//調(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.對(duì)接中的跨域(CROS)問(wèn)題

什么時(shí)候會(huì)發(fā)生跨域問(wèn)題？

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

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

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

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

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

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

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

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

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

那么答案顯然易見(jiàn)，跨域的option請(qǐng)求被token過(guò)濾器所攔截，攔截器等于無(wú)效狀態(tài)。

解決方案有兩個(gè)，

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

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

3.總結(jié)

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