django自带的csrf验证功能
使用django时，django框架都会自带csrf的验证功能，根据django的使用文档一般是在前端页面的form表单里添加{% csrf_token %}标签，当浏览器加载该页面时，django会解析模板页面，渲染{% csrf_token %}为一个input标签，如下图所示:
html页面代码
<form>
{% csrf_token %}
.....
</form>
django渲染后的html代码
在这里插入图片描述
经过上面的分析，我们可以清晰的了解到，原生django在使用过程中，csrf会自动通过表单提交将token值传输到后台。
问题
如果前端采用vue的模式开发web页面，就要面临{% csrf_token %}无法被渲染的问题，因为vue的前端页面都是通过js动态渲染生成的，即使你在组件页面里添加了{% csrf_token %}标签，最后也会被编码到js文件中而不是html文件中，django渲染时只会对html渲染。这就会导致在使用axios做前端异步请求时，除了get之外的请求方法django都会返回403状态码，表单总是提交不上去。
解决方法(两种)：
方法一：
先通过get方法获取csrf_token的值，然后缓存起来。之后每次发起post异步请求时，将获取到的csrf_token值携带上。
- django提供了获取csrf_token值的方法，在django中创建一个获取csrf_token的视图函数：
#
from django.middleware.csrf import get_token
def get_csrf_token(request):
print(request)
csrf_token = get_token(request) # 获取csrf_token的值
print(csrf_token)
return json_response(data={'token': csrf_token})
- 前端在POST请求之前先通过get的方式把csrf_token获取到，并缓存起来
import axios from 'axios'
// 获取csrf_token
axios.get('/api/home/token/').then(res => {
let csrf_token = res.data.data.token
window.sessionStorage.setItem("csrf_token", csrf_token)
})
// post请求，配置请求头
axios({
url: '/api/auth/login/',
method: 'post',
data: {
username: this.username,
password: this.password
},
headers: {
'Content-Type':'application/x-www-form-urlencoded',
'X-CSRFToken': window.sessionStorage.getItem("csrf_token")
}
})
上述这种方式相当于手动将csrf值获取到然后在重新传给后台验证，而原生的django其实是帮你做了处理。
方法二：
前端设置axios请求拦截器，用于获取cookie中csrftoken的值，然后在请求头中添加X-CSRFToken等配置项。
