前言

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

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

• CORS (主流的解決方法，推薦)

• JSONP (有缺陷的解決方法，只支持 GET 請(qǐng)求)

下面我們重點(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)行配置，客戶端瀏覽器無須做任何額外的配置，即可請(qǐng)求開啟了 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 的請(qǐng)求：

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

* 表示允許來自任何域的請(qǐng)求

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

默認(rèn)情況下，CORS 僅支持客戶端向服務(wù)器發(fā)送如下的 9 的請(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ù)器端通過 Access-Control-Allow-Headers 對(duì)額外的請(qǐng)求頭進(jìn)行聲明，否則這次請(qǐng)求會(huì)失敗！

// 允許客戶端額外向服務(wù)器發(fā)送 Content-Type 請(qǐng)求頭和 X-Custom-Header 請(qǐng)求頭
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 請(qǐng)求。如果客戶端希望通過 PUT、DELETE 等方式請(qǐng)求服務(wù)器的資源，則需要在服務(wù)器端，通過 Access-Control-Allow-Methods 來指明實(shí)際請(qǐng)求所允許使用的 HTTP 方法。

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

CORS 請(qǐng)求的分類

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

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

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

• 請(qǐng)求方式：GET、POST、HEAD 三者之一

• HTTP 頭部信息無自定義的頭部字段

• 預(yù)檢請(qǐng)求

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

• 請(qǐng)求方式為 GET、POST、HEAD 之外的請(qǐng)求類型

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

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

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

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

簡(jiǎn)單請(qǐng)求：客戶端和服務(wù)器之間只會(huì)發(fā)生一次請(qǐng)求。

預(yù)檢請(qǐng)求：客戶端和服務(wù)器之間會(huì)發(fā)生兩次請(qǐng)求，OPTION 預(yù)檢請(qǐng)求成功之后，才會(huì)發(fā)起真正的請(qǐng)求。

JSONP

瀏覽器通過 <script> 標(biāo)簽的 src 屬性請(qǐng)求服務(wù)器上的數(shù)據(jù)，同時(shí)服務(wù)器返回一個(gè)函數(shù)的調(diào)用。這種請(qǐng)求數(shù)據(jù)的方式叫做 JSONP。

特點(diǎn)：

• JSONP 不屬于真正的 Ajax 請(qǐng)求，因?yàn)樗鼪]有使用 XMLHttpRequest 這個(gè)對(duì)象。

• JSONP 僅支持 GET 請(qǐng)求。

如果項(xiàng)目中已經(jīng)配置了 CORS 跨域資源共享，為了防止沖突，必須在配置 CORS 中間件之前聲明 JSONP 的接口，否則 JSONP 接口會(huì)被處理成開啟了 CORS 的接口。

最后

文中主要介紹了 CORS 這種解決方案，對(duì)于 JSONP 只是進(jìn)行了簡(jiǎn)單地描述，如果覺得有不足的地方，歡迎大家在評(píng)論區(qū)補(bǔ)充~

到此這篇關(guān)于Node中解決接口跨域問題詳解的文章就介紹到這了,更多相關(guān)Node解決接口跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！