vue+django前后端分离：axios异步请求，如何解决csrf传输问题

django自带的csrf验证功能

使用django时，django框架都会自带csrf的验证功能，根据django的使用文档一般是在前端页面的form表单里添加{% csrf_token %}标签，当浏览器加载该页面时，django会解析模板页面，渲染{% csrf_token %}为一个input标签，如下图所示:
html页面代码

    {%   csrf_token %}
    .....

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值携带上。

1. 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})

2. 前端在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等配置项。

请参考： axios请求拦截器&响应拦截器 介绍(其中有解决csrf问题的方案)