Node接口跨域問題怎么解決

這篇文章主要介紹了Node接口跨域問題怎么解決的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Node接口跨域問題怎么解決文章都會(huì)有所收獲，下面我們一起來看看吧。

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ù)。

簡單請求和預(yù)檢請求的區(qū)別

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

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

JSONP

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

特點(diǎn)：

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

• JSONP 僅支持 GET 請求。

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

關(guān)于“Node接口跨域問題怎么解決”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Node接口跨域問題怎么解決”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。