自動化測試平台開發（四）：django+vue前后端分離項目，解決跨域問題

一、后端配置

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來判斷是不是我的用戶。這樣就解決了安全的問題。

 

-------- THE END --------