跨域问题（同源策略）

前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持

否则前端无法使用axios无法请求后端提供的api数据，我们使用CORS来解决后端对跨域访问的支持。

 

使用django-cors-headers扩展

在 Response(headers={"Access-Control-Allow-Origin":'客户端地址/*'})

 

文档：https://github.com/ottoyiu/django-cors-headers/

 

前端使用 axios就可以访问到后端提供给的数据接口，但是如果要附带cookie信息，前端还要设置一下。

前端引入axios插件并配置允许axios发送cookie信息[axios本身也不允许ajax发送cookie到后端]

1、前端vue使用axios发送ajax请求

下载：

　　npm i axios -S

在main.js中引用 axios插件：

　　import axios from 'axios'; // 从node_modules目录中导入包

　　// 允许ajax发送请求时附带cookie，设置为不允许
　　axios.defaults.withCredentials = false;

　　Vue.prototype.$axios = axios; // 把对象挂载vue中

 

2、后端django使用

安装：

　　pip install django-cors-headers

settings/dev.py，添加应用：

　　INSTALLED_APPS = (
　　...
　　'corsheaders',
　　...
　　)

中间层设置【必须写在第一个位置】：

　　MIDDLEWARE = [
　　'corsheaders.middleware.CorsMiddleware',
　　...
　　]

添加白名单：

　　# CORS组的配置信息
　　CORS_ORIGIN_WHITELIST = (
　　'http://www.renran.cn:8080',
　　)
　　CORS_ALLOW_CREDENTIALS = False # 允许ajax跨域请求时携带cookie

 

 如果后端允许ajax跨域请求时携带cookie需要如下设置：

　　# CORS_ALLOW_CREDENTIALS = True # 允许ajax跨域请求时携带cookie
　　# CORS_ORIGIN_ALLOW_ALL = True

 

完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了。