vue+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渲染。

解决方法：
django提供了获取csrf_token值的方法：

#
from django.middleware.csrf import get_token
def foo(request):
		csrf_token = get_token(request)   //此时可以获取到csrf_token的值

**前端代码：**前端在POST之前先通过get的方式把csrf_token获取到

this.$http.post(
		'/index/', 
		formData, {
		//POST之前先通过get的方式把csrf_token获取到,并赋值给this.csrf
         			headers: { 'Content-Type': 'multipart/form-data', 'X-CSRFToken': this.csrf},
       				}).then(function (res) {
             ....
          }, function (res) {
            ......
          });

上传这种方式相当于手动将csrf值获取到然后在重新传给后台验证，而原生的django其实是帮你做了处理。