Node中解決接口跨域問題詳解

更新時(shí)間：2023年04月26日 09:23:54 作者：codinglin

在 Node 中編寫接口時(shí)，我們常常會(huì)遇到跨域問題，通過本篇文章，我們來聊聊如何解決 Node 中接口的跨域問題，文中代碼示例介紹了非常詳細(xì)，需要的朋友可以借鑒一下

前言

在 Node 中編寫接口時(shí)，我們常常會(huì)遇到跨域問題，通過本篇文章，我們來聊聊如何解決 Node 中接口的跨域問題。

解決接口的跨域問題的常用方法有兩種：

CORS (主流的解決方法，推薦)
JSONP (有缺陷的解決方法，只支持 GET 請求)

下面我們重點(diǎn)來了解一下 CORS 這種跨域解決方案......

CORS

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

瀏覽器的同源安全策略默認(rèn)會(huì)阻止網(wǎng)頁跨域獲取資源。但如果接口服務(wù)器配置了 CORS 相關(guān)的 HTTP 響應(yīng)頭，則可以解除瀏覽器端的跨域訪問限制。

CORS 主要在 服務(wù)器端 進(jìn)行配置，客戶端瀏覽器無須做任何額外的配置，即可請求開啟了 CORS 的接口。
CORS 在瀏覽器中有兼容性。只有支持 XMLHttpRequest Level2 的瀏覽器，才能正常訪問開啟了 CORS 的服務(wù)器端口。(如：IE10+、Chrome4+、FireFox3.5+)

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

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

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

其中，origin 參數(shù)的值指定了允許訪問該資源的外域 URL。例如，下面的字段值只允許來自 itcast.cn 的請求：

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

* 表示允許來自任何域的請求

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

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

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ā)送了額外的請求頭信息，則需在服務(wù)器端通過 Access-Control-Allow-Headers 對額外的請求頭進(jìn)行聲明，否則這次請求會(huì)失敗！

// 允許客戶端額外向服務(wù)器發(fā)送 Content-Type 請求頭和 X-Custom-Header 請求頭
res.setHeader("Access-Control-Allow-Headers", "Content-Type, X-Custom-Header");

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

默認(rèn)情況下，CORS 僅支持客戶端發(fā)起 GET、POST、HEAD 請求。如果客戶端希望通過 PUT、DELETE 等方式請求服務(wù)器的資源，則需要在服務(wù)器端，通過 Access-Control-Allow-Methods 來指明實(shí)際請求所允許使用的 HTTP 方法。

res.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE,HEAD");
// 允許使用所有的 HTTP 請求方法
res.setHeader("Access-Control-Allow-Methods", "*");

CORS 請求的分類

客戶端在請求 CORS 接口時(shí)，根據(jù)請求方式和請求頭不同，可以將 CORS 的請求分為兩大類，分別是：

簡單請求

同時(shí)滿足兩大條件的請求，就屬于簡單請求：

請求方式：GET、POST、HEAD 三者之一
HTTP 頭部信息無自定義的頭部字段

預(yù)檢請求

只要符合以下任何一個(gè)條件的請求，都屬于預(yù)檢請求：

請求方式為 GET、POST、HEAD 之外的請求類型
請求頭中包含自定義頭部字段
向服務(wù)器發(fā)送了 application/json 格式的數(shù)據(jù)

在瀏覽器與服務(wù)器正式通信之前，瀏覽器會(huì)先發(fā)送 OPTION 請求進(jìn)行預(yù)檢，以獲知服務(wù)器是否允許該實(shí)際請求，所以這一次的 OPTION 請求稱為預(yù)檢請求。服務(wù)器成功響應(yīng)預(yù)檢請求后，才會(huì)發(fā)送真正的請求，并且攜帶真實(shí)數(shù)據(jù)。