自动化测试平台开发（四）：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 --------