您好,登錄后才能下訂單哦!
小編給大家分享一下如何解決Django+vue跨域問題,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
跨域
由于開發(fā)模式為前后端分離式開發(fā),故而通常情況下,前端和后端可能運(yùn)行不同的ip或者port下,導(dǎo)致出現(xiàn)跨域問題,故而單獨(dú)說明
什么是跨域
跨域是指一個(gè)域下的文檔或腳本試圖去請求另一個(gè)域下的資源,這里跨域是廣義的。
其實(shí)我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景。
什么是同源策略?
同源策略/SOP(Same origin policy)是一種約定,由Netscape公司1995年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協(xié)議+域名+端口"三者相同,即便兩個(gè)不同的域名指向同一個(gè)ip地址,也非同源。
同源策略限制以下幾種行為:
Cookie、LocalStorage 和 IndexDB 無法讀取
DOM 和 Js對象無法獲得
AJAX 請求不能發(fā)送
跨域錯(cuò)誤瀏覽器會(huì)在控制臺(tái)中出現(xiàn)如下錯(cuò)誤:
報(bào)錯(cuò)信息如下:
Access to XMLHttpRequest at ' http://127.0.0.1 :8000/api/test/' from origin ' http://127.0.0.1 :3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
翻譯過來即是:從源地址 http://127.0.0.1 :3000 發(fā)起的到 http://127.0.0.1 :8000/api/test/ 的XMLHttpRequest訪問違反了同源策略:因?yàn)樵谡埱箢^中沒有Access-Control-Allow-Origin的值
前端解決跨域
參考博客
既然跨域是因?yàn)椴煌?,那我同源不就完事兒了,但是后端請求地址不可能改變,所以可以在前端和后端的中間加一層代理,前端通過代理訪問后端。
在Vue-cli工具中已經(jīng)提供了代理的功能,只需要配置即可。
在根目錄下的config/index.js文件中有如下配置項(xiàng):
proxyTable: { '/': { target: 'http://127.0.0.1:8000/', changeOrigin: true, pathRewrite: { '^/api': '' } } },
'/'表示以'/'(即所有的路徑)開頭的路徑均需要代理,
target:代理的目標(biāo)服務(wù)器地址(即后端服務(wù)器地址)為 ' http://127.0.0.1 :8000/',
changeOrigin,為修改源:修改請求中的源地址
pathReWrite:URL路徑重寫,對于以'/api'開頭的路徑將'/api'替換為''
后端解決跨域
參考博客
后端出于安全考慮,也會(huì)對于跨域有限制,解決方法如下:
安裝django-cors-headers
$ pip install django-cors-headers
配置settings.py文件
INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE_CLASSES = ( ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', # 注意順序 ... ) #跨域增加忽略 CORS_ALLOW_CREDENTIALS = True CORS_ORIGIN_ALLOW_ALL = True CORS_ORIGIN_WHITELIST = ( '*' ) CORS_ALLOW_METHODS = ( 'DELETE', 'GET', 'OPTIONS', 'PATCH', 'POST', 'PUT', 'VIEW', ) CORS_ALLOW_HEADERS = ( 'XMLHttpRequest', 'X_FILENAME', 'accept-encoding', 'authorization', 'content-type', 'dnt', 'origin', 'user-agent', 'x-csrftoken', 'x-requested-with', 'Pragma', )
以上是“如何解決Django+vue跨域問題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。