1. 接口的跨域問(wèn)題

- 解決接口跨域問(wèn)題的方案主要有三種：

? ? ① CORS（主流的解決方案狭园，推薦使用）跨域資源共享

? ? ② JSONP（有缺陷的解決方案：只支持 GET 請(qǐng)求）

? ? ③ 服務(wù)器的反向代理（利用服務(wù)器之間通信不受同源策略的影響）

2. 使用 cors 中間件解決跨域問(wèn)題

- cors 是 Express 的一個(gè)第三方中間件卵渴。通過(guò)安裝和配置 cors 中間件潮针，可以很方便地解決跨域問(wèn)題拜鹤。使用步驟分為如下 3 步：

? ? ① 運(yùn)行 npm install cors 安裝中間件

? ? ② 使用 const cors = require('cors') 導(dǎo)入中間件

? ? ③ 在路由之前調(diào)用 app.use(cors()) 配置中間件

3. 什么是 CORS

- CORS （Cross-Origin Resource Sharing耍贾，跨域資源共享）由一系列 HTTP 響應(yīng)頭組成苫费，這些 HTTP 響應(yīng)頭決定瀏覽器是否阻止前端 JS 代碼跨域獲取資源翁狐。

- 瀏覽器的同源安全策略默認(rèn)會(huì)阻止網(wǎng)頁(yè)“跨域”獲取資源准夷。但如果接口服務(wù)器配置了 CORS 相關(guān)的 HTTP 響應(yīng)頭钥飞，

- CORS 在瀏覽器中有兼容性。只有支持 XMLHttpRequest Level2 的瀏覽器衫嵌，才能正常訪問(wèn)開(kāi)啟了 CORS 的服務(wù)端接口（例如：IE10+读宙、Chrome4+、FireFox3.5+）

4. CORS 響應(yīng)頭部 - Access-Control-Allow-Origin

- 響應(yīng)頭部中可以攜帶一個(gè) Access-Control-Allow-Origin 字段楔绞，其語(yǔ)法如下:

```js

? ? Access-Control-Allow-Origin: <origin> | *

```

- 其中结闸，origin 參數(shù)的值指定了允許訪問(wèn)該資源的外域 URL唇兑。

```js

? ? // 例如，下面的字段值將只允許來(lái)自 http://itcast.cn 的請(qǐng)求：

? ? res.setHeader('Access-Control-Allow-Origin', 'http://itcast.cn')

? ? // 例如桦锄，下面的字段值將允許所有請(qǐng)求：

? ? res.setHeader('Access-Control-Allow-Origin', '*')

```

5. CORS 響應(yīng)頭部 - Access-Control-Allow-Headers

- 默認(rèn)情況下扎附，CORS 僅支持客戶端向服務(wù)器發(fā)送如下的 9 個(gè)請(qǐng)求頭：

? ? Accept、Accept-Language结耀、Content-Language留夜、DPR、Downlink图甜、Save-Data香伴、Viewport-Width、Width 具则、Content-Type （值僅限于 text/plain、multipart/form-data具帮、application/x-www-form-urlencoded 三者之一）

? ? 如果客戶端向服務(wù)器發(fā)送了額外的請(qǐng)求頭信息博肋，則需要在服務(wù)器端，通過(guò) Access-Control-Allow-Headers 對(duì)額外的請(qǐng)求頭進(jìn)行聲明蜂厅，否則這次請(qǐng)求會(huì)失敺朔病！

```js

? ? // 允許客戶端額外向服務(wù)器發(fā)送 Content-Type 請(qǐng)求頭和 X-Custom-Header 請(qǐng)求頭

? ? // 注意：多個(gè)請(qǐng)求頭之間使用英文的逗號(hào)進(jìn)行分割

? ? res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Header')

```

6. CORS 響應(yīng)頭部 - Access-Control-Allow-Methods

- 默認(rèn)情況下掘猿，CORS 僅支持客戶端發(fā)起 GET病游、POST、HEAD 請(qǐng)求稠通。

? ? 如果客戶端希望通過(guò) PUT衬衬、DELETE 等方式請(qǐng)求服務(wù)器的資源，則需要在服務(wù)器端改橘，通過(guò) Access-Control-Alow-Methods 來(lái)指明實(shí)際請(qǐng)求所允許使用的 HTTP 方法滋尉。示例代碼如下：

```js

? ? // 只允許 POST、 GET飞主、 DELETE狮惜、 HEAD 請(qǐng)求方法

? ? res.setHeader('Access-Control-Allow-Methods', 'POST, GET, DELETE, HEAD')

? ? // 允許所有的 HTTP 請(qǐng)求方法

? ? res.setHeader('Access-Control-Allow-Methods', '*')

```

7. CORS請(qǐng)求的分類(lèi)

- 客戶端在請(qǐng)求 CORS 接口時(shí)，根據(jù)請(qǐng)求方式和請(qǐng)求頭的不同碌识，可以將 CORS 的請(qǐng)求分為兩大類(lèi)碾篡，分別是：

? ? ① 簡(jiǎn)單請(qǐng)求

? ? ② 預(yù)檢請(qǐng)求

? ? 1. 簡(jiǎn)單請(qǐng)求

? ? - 同時(shí)滿足以下兩大條件的請(qǐng)求，就屬于簡(jiǎn)單請(qǐng)求：

? ? ① 請(qǐng)求方式：GET筏餐、POST开泽、HEAD 三者之一

? ? ② HTTP 頭部信息不超過(guò)以下幾種字段：無(wú)自定義頭部字段、Accept魁瞪、Accept-Language眼姐、Content-Language诅迷、DPR、Downlink众旗、Save-Data罢杉、Viewport-Width、Width 贡歧、Content-Type（只有三個(gè)值application/x-www-form-urlencoded滩租、multipart/form-data、text/plain）

? ? 2. 預(yù)檢請(qǐng)求

? ? - 只要符合以下任何一個(gè)條件的請(qǐng)求利朵，都需要進(jìn)行預(yù)檢請(qǐng)求：

? ? ① 請(qǐng)求方式為 GET律想、POST、HEAD 之外的請(qǐng)求 Method 類(lèi)型

? ? ② 請(qǐng)求頭中包含自定義頭部字段

? ? ③ 向服務(wù)器發(fā)送了 application/json 格式的數(shù)據(jù)

? ? - 在瀏覽器與服務(wù)器正式通信之前绍弟，瀏覽器會(huì)先發(fā)送 OPTION 請(qǐng)求進(jìn)行預(yù)檢技即，以獲知服務(wù)器是否允許該實(shí)際請(qǐng)求，所以這一次的 OPTION 請(qǐng)求稱(chēng)為“預(yù)檢請(qǐng)求”樟遣。服務(wù)器成功響應(yīng)預(yù)檢請(qǐng)求后而叼，才會(huì)發(fā)送真正的請(qǐng)求，并且攜帶真實(shí)數(shù)據(jù)豹悬。

? ? 3. 簡(jiǎn)單請(qǐng)求和預(yù)檢請(qǐng)求的區(qū)別

? ? - 簡(jiǎn)單請(qǐng)求的特點(diǎn)：客戶端與服務(wù)器之間只會(huì)發(fā)生一次請(qǐng)求葵陵。

? ? - 預(yù)檢請(qǐng)求的特點(diǎn)：客戶端與服務(wù)器之間會(huì)發(fā)生兩次請(qǐng)求，OPTION 預(yù)檢請(qǐng)求成功之后瞻佛，才會(huì)發(fā)起真正的請(qǐng)求脱篙。