一、後端配置

1. 安裝django-cors-headers

   pip install django-cors-headers

2. 配置setting.py

   # 安裝app
   INSTALLED_APPS = [
       'django.contrib.admin',
       'django.contrib.auth',
       'django.contrib.contenttypes',
       'django.contrib.sessions',
       'django.contrib.messages',
       'django.contrib.staticfiles',
       #剛才安裝的django-cors-headers包所引入的app
    
   
       'corsheaders'
   ]
   
   # 配置允許項
   #開啟debug模式，注意上線運營時要關閉debug
   DEBUG = True
   # 允許所有ip訪問
   ALLOWED_HOSTS = ['*']
   CORS_ALLOW_CREDENTIALS = True
   CORS_ORIGIN_ALLOW_ALL = True
   #允許所有的請求頭
   CORS_ALLOW_HEADERS = ('*')
   
   # 配置中介軟體
   MIDDLEWARE = [
       'django.middleware.security.SecurityMiddleware',
       'django.contrib.sessions.middleware.SessionMiddleware
    
   ',
       'corsheaders.middleware.CorsMiddleware', #注意順序，必須放在這兒
       'django.middleware.common.CommonMiddleware',
       'django.middleware.csrf.CsrfViewMiddleware', 
       'django.contrib.auth.middleware.AuthenticationMiddleware',
       'django.contrib.messages.middleware.MessageMiddleware',
       'django.middleware.clickjacking.XFrameOptionsMiddleware
    
   ', #最後一個也必須放在這兒
   ]

二、前端配置

　　VUE請求後臺資料使用axios是目前最為流行的，也是最好的。這裡還需要配置你的axios才可以讓VUE正常的請求後臺

1. 首先現在你的專案裡面安裝axios

   npm install axios -s
   或者
   npm install axios --save

2. 配置main.js 全域性使用axios

   // 匯入axios
   import Axios from 'axios';
   // 全域性使用axios
   Vue.prototype.$axios = Axios;
   // 配置請求頭，非常重要，有了這個才可以正常使用POST等請求後臺資料
   Axios.defaults.headers.post['Content-Type'] = 'application/x-www-fromurlencodeed'

三、問題與思考

　　有的小夥伴就要問了，這樣一來別人的前端和非法的請求是不是也可以訪問我的後臺資料呢？這個問題就涉及到安全認證或登入認證了，現在最為流行和高效的是採用JWT認證方式（上一節實現的使用者登入）。簡單解釋就是我需要保護的後臺資料必須經過認證之後才能正常的取到，否則是取不到的。這個認證就是採用JWT的方式（json web token）。當前端請求登入時，成功就返回一個唯一標識並且有有效期的token給前端。然後前端將這個token以及使用者資訊全部儲存在資料中心和瀏覽器的cookie和seesion當中，與此同時會在以後的每次請求後臺資料的時候攜帶這個token在headers裡面。後臺就會根據前端傳來的token來判斷是不是我的使用者。這樣就解決了安全的問題。