Django+vue跨域問題解決

跨域

由于開發(fā)模式為前后端分離式開發(fā)书妻,故而通常情況下辑甜,前端和后端可能運行不同的ip或者port下材原,導致出現(xiàn)跨域問題,故而單獨說明

什么是跨域

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源袖迎,這里跨域是廣義的冕臭。
其實我們通常所說的跨域是狹義的,是由瀏覽器同源策略限制的一類請求場景燕锥。

什么是同源策略辜贵?

同源策略/SOP(Same origin policy)是一種約定,由Netscape公司1995年引入瀏覽器归形,它是瀏覽器最核心也最基本的安全功能托慨,如果缺少了同源策略,瀏覽器很容易受到XSS暇榴、CSFR等攻擊厚棵。所謂同源是指"協(xié)議+域名+端口"三者相同,即便兩個不同的域名指向同一個ip地址蔼紧,也非同源窟感。

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

  1. Cookie、LocalStorage 和 IndexDB 無法讀取
  2. DOM 和 Js對象無法獲得
  3. AJAX 請求不能發(fā)送

跨域錯誤瀏覽器會在控制臺中出現(xiàn)如下錯誤:
報錯信息如下:

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訪問違反了同源策略:因為在請求頭中沒有Access-Control-Allow-Origin的值

前端解決跨域

參考博客

既然跨域是因為不同源歉井,那我同源不就完事兒了柿祈,但是后端請求地址不可能改變,所以可以在前端和后端的中間加一層代理,前端通過代理訪問后端躏嚎。
在Vue-cli工具中已經(jīng)提供了代理的功能蜜自,只需要配置即可。
在根目錄下的config/index.js文件中有如下配置項:

proxyTable: {
      '/': { 
        target: 'http://127.0.0.1:8000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
  • '/'表示以'/'(即所有的路徑)開頭的路徑均需要代理卢佣,
  • target:代理的目標服務器地址(即后端服務器地址)為 'http://127.0.0.1:8000/',
  • changeOrigin重荠,為修改源:修改請求中的源地址
  • pathReWrite:URL路徑重寫,對于以'/api'開頭的路徑將'/api'替換為''

后端解決跨域

參考博客

后端出于安全考慮虚茶,也會對于跨域有限制戈鲁,解決方法如下:

安裝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',
)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末嘹叫,一起剝皮案震驚了整個濱河市婆殿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌罩扇,老刑警劉巖婆芦,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異喂饥,居然都是意外死亡消约,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門员帮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來或粮,“玉大人,你說我怎么就攤上這事捞高”惶洌” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵棠枉,是天一觀的道長。 經(jīng)常有香客問我泡挺,道長辈讶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任娄猫,我火速辦了婚禮贱除,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘媳溺。我一直安慰自己月幌,他們只是感情好,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布悬蔽。 她就那樣靜靜地躺著扯躺,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上录语,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天倍啥,我揣著相機與錄音,去河邊找鬼澎埠。 笑死虽缕,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的蒲稳。 我是一名探鬼主播氮趋,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼江耀!你這毒婦竟也來了剩胁?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤决记,失蹤者是張志新(化名)和其女友劉穎摧冀,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體系宫,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡索昂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了扩借。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片椒惨。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖潮罪,靈堂內(nèi)的尸體忽然破棺而出康谆,到底是詐尸還是另有隱情,我是刑警寧澤嫉到,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布沃暗,位于F島的核電站,受9級特大地震影響何恶,放射性物質(zhì)發(fā)生泄漏孽锥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一细层、第九天 我趴在偏房一處隱蔽的房頂上張望惜辑。 院中可真熱鬧,春花似錦疫赎、人聲如沸盛撑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽抵卫。三九已至狮荔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間陌僵,已是汗流浹背轴合。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留碗短,地道東北人受葛。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像偎谁,于是被迫代替她去往敵國和親总滩。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容

  • 什么是跨域 跨域巡雨,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本闰渔。它是由瀏覽器的同源策略造成的,是瀏覽器對JavaScript實...
    他方l閱讀 1,062評論 0 2
  • 題目1.什么是同源策略? 同源策略(Same origin Policy): 瀏覽器出于安全方面的考慮铐望,只允許與本...
    FLYSASA閱讀 1,715評論 0 6
  • 什么是跨域 跨域冈涧,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的正蛙,是瀏覽器對JavaScript實...
    Yaoxue9閱讀 1,288評論 0 6
  • 什么是跨域 跨域督弓,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的乒验,是瀏覽器對JavaScript實...
    HeroXin閱讀 834評論 0 4
  • 關(guān)于echart2,echart3地圖的使用一點人生經(jīng)驗: 1.echart3愚隧,echa...
    polong閱讀 3,428評論 6 14