快捷導(dǎo)航

Django跨域資源共享問(wèn)題(推薦)

更新時(shí)間：2020年03月09日 10:21:12 作者：黑里俏

跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP 頭來(lái)告訴瀏覽器讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問(wèn)來(lái)自不同源服務(wù)器上的指定的資源。這篇文章主要介紹了Django跨域資源共享問(wèn)題小結(jié),需要的朋友可以參考下

最近做了一個(gè)前后端分離的web項(xiàng)目，其中我司職后端，使用django框架。在前后端集成測(cè)試的時(shí)候，就遇到了一些web安全相關(guān)的問(wèn)題，cors跨域資源共享就是其中之一。

cors問(wèn)題介紹

跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP 頭來(lái)告訴瀏覽器讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問(wèn)來(lái)自不同源服務(wù)器上的指定的資源。當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域、協(xié)議或端口請(qǐng)求一個(gè)資源時(shí)，資源會(huì)發(fā)起一個(gè)跨域 HTTP 請(qǐng)求。 CORS機(jī)制允許 Web 應(yīng)用服務(wù)器進(jìn)行跨域訪問(wèn)控制，從而使跨域數(shù)據(jù)傳輸?shù)靡园踩M(jìn)行。現(xiàn)代瀏覽器支持在API容器中使用CORS，以降低跨域 HTTP 請(qǐng)求所帶來(lái)的風(fēng)險(xiǎn)。

一個(gè)域是由協(xié)議、主機(jī)和端口號(hào)組成的，簡(jiǎn)單地說(shuō)，當(dāng)兩個(gè)url的協(xié)議、主機(jī)和端口中存在一個(gè)不同時(shí)，它們屬于不同域，那么它們之間的互相訪問(wèn)就會(huì)產(chǎn)生跨域訪問(wèn)問(wèn)題。

我的項(xiàng)目中，前端的地址是 http://localhost:8001 ,后端的地址是 http://localhost:8000 ,兩個(gè)地址的協(xié)議和主機(jī)都相同，但是端口號(hào)不同，因此，前端調(diào)用后端接口時(shí)，就會(huì)產(chǎn)生跨域訪問(wèn)的問(wèn)題。

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

簡(jiǎn)單請(qǐng)求不會(huì)觸發(fā)跨域訪問(wèn)中的預(yù)檢請(qǐng)求，滿(mǎn)足下列條件的為簡(jiǎn)單請(qǐng)求:

使用下列方法之一

GET
HEAD
POST

headers字段集合主要包含以下類(lèi)型：

Accept
Accept-Language
Content-Language
Content-type : text/plain 、 multipart/form-data 和 application/x-www-form-urlencoded
DRP
DownLink
Save-Data
Viewport-Width
Width

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

非簡(jiǎn)單請(qǐng)求即不滿(mǎn)足簡(jiǎn)單請(qǐng)求條件的請(qǐng)求。非簡(jiǎn)單請(qǐng)求在發(fā)出請(qǐng)求前需要先發(fā)送一個(gè)預(yù)檢請(qǐng)求，請(qǐng)求方法為 OPTIONS 方法。預(yù)檢請(qǐng)求的使用，可以避免跨域請(qǐng)求對(duì)服務(wù)器的用戶(hù)數(shù)據(jù)產(chǎn)生未預(yù)期的影響。當(dāng)請(qǐng)求滿(mǎn)足下述任一條件時(shí)，即應(yīng)首先發(fā)送預(yù)檢請(qǐng)求：

使用了以下的HTTP方法:

PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH

首部字段里面包含了非簡(jiǎn)單請(qǐng)求的頭部字段的字段

django中遇到的問(wèn)題

在后臺(tái)開(kāi)發(fā)中，就遇到了這樣的情況

錯(cuò)誤提示中顯示，請(qǐng)求被 CORS 協(xié)議阻攔。

這里的 Origin 字段說(shuō)明了請(qǐng)求源地址，采用了 OPTIONS 方法，然后發(fā)出請(qǐng)求的地址 Host
就是本機(jī)地址。下面是服務(wù)器的響應(yīng)，但是沒(méi)有發(fā)出實(shí)際請(qǐng)求

然后，為了解決這一問(wèn)題，我搜索過(guò)后，安裝了django-cors-headers庫(kù)，并且進(jìn)行了配置，這里配置時(shí)我把django-cors-headers中間件放在了中間件第一位。再次訪問(wèn)同樣的地址，結(jié)果如下：

1.首先，瀏覽器檢測(cè)訪問(wèn)的請(qǐng)求頭中的字段，存在對(duì) CORS 安全的首部字段集合之外的字段，所以，向服務(wù)器發(fā)送一個(gè)預(yù)檢請(qǐng)求。上圖可見(jiàn)，方法為 OPTIONS ，該方法不會(huì)對(duì)服務(wù)器資源產(chǎn)生影響。其中的請(qǐng)求頭中的 Access-Control-Request-Method 字段表明實(shí)際請(qǐng)求會(huì)采用 GET 方法， Origin 表示請(qǐng)求源，會(huì)在服務(wù)器中接受驗(yàn)證。

2.驗(yàn)證通過(guò)后，會(huì)在 response 請(qǐng)求頭添加不同的字段進(jìn)行返回，字段的意思如下：

首部字段 Access-Control-Allow-Headers ：表示服務(wù)器允許的頭部字段。
首部字段 Access-Control-Allow-Methods ：表明服務(wù)器允許客戶(hù)端使用 POST , GET 和 OPTIONS 等等方法發(fā)起請(qǐng)求。
首部字段 Access-Control-Allow-Origin ：表示服務(wù)器允許的請(qǐng)求源。
首部字段 Access-Control-Max-Age :表明該響應(yīng)的有效時(shí)間為86400秒，也就是24 小時(shí)。在有效時(shí)間內(nèi)，瀏覽器無(wú)須為同一請(qǐng)求再次發(fā)起預(yù)檢請(qǐng)求。

3.然后，客戶(hù)端會(huì)發(fā)出實(shí)際請(qǐng)求，從結(jié)果上來(lái)看，預(yù)檢請(qǐng)求的 response 請(qǐng)求體中沒(méi)有任何信息，而實(shí)際請(qǐng)求則攜帶了服務(wù)器返回的信息。不難看出，預(yù)檢請(qǐng)求確實(shí)就是與服務(wù)器提前溝通，獲取與服務(wù)器相關(guān)信息的。

簡(jiǎn)單的總結(jié)

非簡(jiǎn)單請(qǐng)求需要發(fā)送預(yù)檢請(qǐng)求進(jìn)行判斷，然后服務(wù)端與客戶(hù)端需要在頭部字段上達(dá)成一致，這樣才能正常訪問(wèn)。不過(guò)，在django的開(kāi)發(fā)中，直接使用django-cors-headers庫(kù)以后，只需要簡(jiǎn)單的配置就能夠很好的解決問(wèn)題。

到此這篇關(guān)于Django跨域資源共享問(wèn)題小結(jié)的文章就介紹到這了,更多相關(guān)django跨域資源共享內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: