小編給大家分享一下如何解決Django+vue跨域問(wèn)題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，有關(guān)企業(yè)網(wǎng)站設(shè)計(jì)方案、改版、費(fèi)用等問(wèn)題，行業(yè)涉及咖啡廳設(shè)計(jì)等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

跨域

由于開(kāi)發(fā)模式為前后端分離式開(kāi)發(fā)，故而通常情況下，前端和后端可能運(yùn)行不同的ip或者port下，導(dǎo)致出現(xiàn)跨域問(wèn)題，故而單獨(dú)說(shuō)明

什么是跨域

跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。

其實(shí)我們通常所說(shuō)的跨域是狹義的，是由瀏覽器同源策略限制的一類請(qǐng)求場(chǎng)景。

什么是同源策略？

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

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

1. Cookie、LocalStorage 和 IndexDB 無(wú)法讀取

2. DOM 和 Js對(duì)象無(wú)法獲得

3. AJAX 請(qǐng)求不能發(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.

翻譯過(guò)來(lái)即是：從源地址 http://127.0.0.1 :3000 發(fā)起的到 http://127.0.0.1 :8000/api/test/ 的XMLHttpRequest訪問(wèn)違反了同源策略：因?yàn)樵谡?qǐng)求頭中沒(méi)有Access-Control-Allow-Origin的值

前端解決跨域

參考博客 

既然跨域是因?yàn)椴煌矗俏彝床痪屯晔聝毫?，但是后端?qǐng)求地址不可能改變，所以可以在前端和后端的中間加一層代理，前端通過(guò)代理訪問(wèn)后端。

在Vue-cli工具中已經(jīng)提供了代理的功能，只需要配置即可。

在根目錄下的config/index.js文件中有如下配置項(xiàng)：

proxyTable: {
   '/': { 
    target: 'http://127.0.0.1:8000/',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  },

1. '/'表示以'/'(即所有的路徑)開(kāi)頭的路徑均需要代理，

2. target:代理的目標(biāo)服務(wù)器地址（即后端服務(wù)器地址）為 ' http://127.0.0.1 :8000/',

3. changeOrigin，為修改源：修改請(qǐng)求中的源地址

4. pathReWrite：URL路徑重寫，對(duì)于以'/api'開(kāi)頭的路徑將'/api'替換為''

后端解決跨域

參考博客 

后端出于安全考慮，也會(huì)對(duì)于跨域有限制，解決方法如下：

安裝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跨域問(wèn)題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！