Django+vue跨域問題解決

跨域

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

什麼是跨域

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

什麼是同源策略？

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

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

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

跨域錯誤瀏覽器會在控制檯中出現如下錯誤：
報錯信息如下：

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 發起的到http://127.0.0.1:8000/api/test/ 的XMLHttpRequest訪問違反了同源策略：因爲在請求頭中沒有Access-Control-Allow-Origin的值

前端解決跨域

參考博客

既然跨域是因爲不同源，那我同源不就完事兒了，但是後端請求地址不可能改變，所以可以在前端和後端的中間加一層代理，前端通過代理訪問後端。
在Vue-cli工具中已經提供了代理的功能，只需要配置即可。
在根目錄下的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',
)