HTTP系列之跨域資源共享機制(CORS)介紹

2021-10-08 22:14:10 字數 3085 閱讀 1035

前言

cors簡介

跨域資源共享(cors)是一種機制,它使用額外的 http 頭來告訴瀏覽器 讓執行在乙個 origin (domain) 上的web應用被准許訪問來自不同源伺服器上的指定的資源。當乙個資源從與該資源本身所在的伺服器不同的域、協議或埠請求乙個資源時,此請求就是乙個跨域 http 請求出於安全原因,瀏覽器限制從指令碼內發起的跨源http請求(或者是返回結果被瀏覽器攔截)。因為要確保後台傳遞過來資料的可靠性,就必須前後端關於cors的設定是一致的,而解決此方法要麼是後台放開跨域限制,要麼是前端被動配合後台(這往往與業務不符合)。

兩類cors

根據瀏覽器與後台互動邏輯的不同,cors一般可分為兩類:

簡單請求

滿足條件:

請求方法是以下三種方法之一: head , get , post

http的頭部資訊不超過一下幾種字段:

基本流程:

瀏覽器判斷請求是簡單請求,自動在頭資訊之中,新增乙個origin字段,包含了請求來自的源(協議+網域名稱+埠);

伺服器根據這個值,決定是否同意這次請求(根據已有配置)。如果是在許可範圍內,則返回正確http響應並附帶``access-control-allow-origin的`等頭部字段資訊,瀏覽器正常執行;如果不帶這類字段,則瀏覽器會報錯;

如果跨域被禁,丟擲的錯誤會被xmlhttprequest物件的onerror函式捕獲,下同。

預檢請求

不是簡單請求則都是預檢請求。

基本流程:

非簡單請求的cors請求,會在正式通訊之前,增加一次http查詢請求,稱為"預檢"請求(preflight)。

瀏覽器先詢問伺服器,當前網頁所在的網域名稱是否在伺服器的許可名單之中,以及可以使用哪些http動詞和頭資訊字段。只有得到肯定答覆,瀏覽器才會發出正式的xmlhttprequest請求,否則不會發出後續請求並報錯。

實戰**

簡單模式下放開跨域:

/**	

* server.js

*/const express =

require

("express");

express()

;use

("/*"

,(req,res,next)

=>);

post

("/data"

,(req,res)

=>);

listen

(8081,(

)=>

);

"closebtn"

>

按鈕button

>

>

closebtn.

onclick

=function()

;script

>

簡單模式下禁止跨域:

/**

* server.js

*/// 修改語句為如下,其他不變

res.

header

("access-control-allow-origin"

,"");

預檢模式下允許跨域:

/**

* server.js

*/// 修改語句為如下,其他不變,

res.

header

("access-control-allow-origin"

,"*");

// 放開訪客限制

預檢模式下禁止跨域:

// 新增頭部字段,這樣請求會變成預檢請求

/**

* server.js

*/// 修改語句為如下,其他不變,

// 限制訪客位址只是禁止跨域的一種,也可以限制訪問方法、限制訪問頭部字段

res.

header

("access-control-allow-origin"

,"");

withcredentials屬性

想要傳送cookie和http認證資訊,必須在兩方同時開啟withcredentials屬性。

// 伺服器端

res.

header

("access-control-allow-credentials"

,"true");

// 客戶端

request.

setrequestheader

("withcredentials"

,"true"

);

此外,如果要傳送cookie,access-control-allow-origin就不能設為星號,必須指定明確的、與請求網頁一致的網域名稱。並且cookie依然遵循同源政策,只有用伺服器網域名稱設定的cookie才會上傳,其他網域名稱的cookie並不會上傳,且(跨源)原網頁**中的document.cookie也無法讀取伺服器網域名稱下的cookie。

HTTP 跨域資源共享

cors是什麼 允許伺服器宣告哪些源站有許可權訪問哪些資源。跨域資源共享機制的工作原理主要應用於三個場景 簡單請求是什麼 請求滿足所有下述條件,則該請求可視為 簡單請求 值得注意的是,這些跨域請求與瀏覽器發出的其他跨域請求並無一致。如果伺服器未返回正確的響應首部,則請求方不會收到任何資料。因此,那些...

跨域資源共享

跨域資源共享 跨域資源共享。新增了一組http首部字段,允許伺服器宣告哪些源站有許可權訪問哪些資源,瀏覽器首先使用otions方法發起乙個預檢請求,從而獲知服務端是否允許該跨域請求,服務端確認允許後,才發起實際的http請求,在預檢請求的返回中,伺服器端也可以通知客戶端,是否需要攜帶身份憑證 滿足下...

HTTP 二 跨域資源共享(CORS)

當訪問乙個資源檔案時,如果從非該資源檔案所在的伺服器不同網域名稱或者埠處進行訪問時,該資源會發起乙個跨域請求。例如,a的位址是 該 中html頁面通過img標籤中的src屬性請求 資源,此時,就發生了跨域請求。處於安全考慮,瀏覽器限制從指令碼內發起的跨域資源請求。例如,xhr和fetch的api遵循...