1. 程式人生 > >django+vue打造前後端分離的專案時,跨域問題的解決!

django+vue打造前後端分離的專案時,跨域問題的解決!

1、首先你要先安裝django-cors-headers 這個包

pip install django-cors-headers

2、配置settings.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正常的請求後臺

3、VUE配置

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

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

然後配置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來判斷是不是我的使用者。
這樣就解決了安全的問題。