Django vue跨域問題解決

2021-09-11 15:23:25 字數 1811 閱讀 2099

由於開發模式為前後端分離式開發,故而通常情況下,前端和後端可能執行不同的ip或者port下,導致出現跨域問題,故而單獨說明

跨域是指乙個域下的文件或指令碼試圖去請求另乙個域下的資源,這裡跨域是廣義的。 其實我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景。

什麼是同源策略?

同源策略/sop(same origin policy)是一種約定,由netscape公司2023年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到xss、csfr等攻擊。所謂同源是指"協議+網域名稱+埠"三者相同,即便兩個不同的網域名稱指向同乙個ip位址,也非同源。

同源策略限制以下幾種行為:

cookie、localstorage 和 indexdb 無法讀取

dom 和 js物件無法獲得

ajax 請求不能傳送

翻譯過來即是:從源位址 發起的到 的xmlhttprequest訪問違反了同源策略:因為在請求頭中沒有access-control-allow-origin的值

參考部落格

既然跨域是因為不同源,那我同源不就完事兒了,但是後端請求位址不可能改變,所以可以在前端和後端的中間加一層**,前端通過**訪問後端。 在vue-cli工具中已經提供了**的功能,只需要配置即可。 在根目錄下的config/index.js檔案中有如下配置項:

proxytable: }},

複製**

後端出於安全考慮,也會對於跨域有限制,解決方法如下:

安裝django-cors-headers

$ pip install django-cors-headers

複製**

配置settings.py檔案

...'corsheaders',

...] middleware_classes = (

...'corsheaders.middleware.corsmiddleware',

'django.middleware.common.commonmiddleware', # 注意順序

...)#跨域增加忽略

)複製**

Django vue跨域問題解決

由於開發模式為前後端分離式開發,故而通常情況下,前端和後端可能執行不同的ip或者port下,導致出現跨域問題,故而單獨說明 跨域是指乙個域下的文件或指令碼試圖去請求另乙個域下的資源,這裡跨域是廣義的。其實我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景。什麼是同源策略?同源策略 so...

Django vue跨域問題解決

由於開發模式為前後端分離式開發,故而通常情況下,前端和後端可能執行不同的ip或者port下,導致出現跨域問題,故而單獨說明跨域是指乙個域下的文件或指令碼試圖去請求另乙個域下的資源,這裡跨域是廣義的。其實我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景。什麼是同源策略?同源策略 sop...

跨域問題解決

原文 當前端頁面與後台執行在不同的伺服器時,就必定會出現跨域這一問題,本篇簡單介紹解決跨域的三種方案,部分 截圖如下,僅供參考 方式一 使用ajax的jsonp 前端 伺服器 使用該方式的缺點 請求方式只能是get請求 方式二 使用jquery的jsonp外掛程式 前端 伺服器 使用該方式的特點 與...