溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Django如何解決跨域資源共享問題

發(fā)布時間:2021-07-02 10:29:38 來源:億速云 閱讀:130 作者:小新 欄目:開發(fā)技術(shù)

這篇文章主要介紹Django如何解決跨域資源共享問題,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!

cors問題介紹

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

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

Django如何解決跨域資源共享問題

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

簡單請求

簡單請求不會觸發(fā)跨域訪問中的預(yù)檢請求,滿足下列條件的為簡單請求:

使用下列方法之一

GET
HEAD
POST

headers字段集合主要包含以下類型:

  • Accept

  • Accept-Language

  • Content-Language

  • Content-type : text/plain 、 multipart/form-data 和 application/x-www-form-urlencoded

  • DRP

  • DownLink

  • Save-Data

  • Viewport-Width

  • Width

非簡單請求

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

使用了以下的HTTP方法:

PUT
DELETE
CONNECT
OPTIONS
TRACE
PATCH

首部字段里面包含了非簡單請求的頭部字段的字段

django中遇到的問題

在后臺開發(fā)中,就遇到了這樣的情況

Django如何解決跨域資源共享問題

錯誤提示中顯示,請求被 CORS 協(xié)議阻攔。

Django如何解決跨域資源共享問題

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

Django如何解決跨域資源共享問題

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

Django如何解決跨域資源共享問題

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

2.驗(yàn)證通過后,會在 response 請求頭添加不同的字段進(jìn)行返回, 字段的意思如下:

  • 首部字段 Access-Control-Allow-Headers :表示服務(wù)器允許的頭部字段。

  • 首部字段 Access-Control-Allow-Methods :表明服務(wù)器允許客戶端使用 POST , GET 和 OPTIONS 等等方法發(fā)起請求。

  • 首部字段 Access-Control-Allow-Origin :表示服務(wù)器允許的請求源。

  • 首部字段 Access-Control-Max-Age :表明該響應(yīng)的有效時間為86400秒,也就是24 小時。在有效時間內(nèi),瀏覽器無須為同一請求再次發(fā)起預(yù)檢請求。

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

簡單的總結(jié)

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

以上是“Django如何解決跨域資源共享問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI