django前后端分离csrf解决办法

之前学习django时，总是把那个csrf的中间件注释掉，现在把这个bug修复吧。

1.定义csrftoken接口，主要是为前端设置csrftoken,相关代码如下:

from django.middleware.csrf import get_token

def getToken(request):
    token=get_token(request)
    return HttpResponse(json.dumps({'token':token}), content_type="application/json,charset=utf-8")

2.前端获取token，我这里使用axios请求的，直接请求这个接口就行，后台会直接给浏览器设置cookie的。

注意：如果是跨域请求，则设置不成功，因为无法跨域设置cookie，但是前后端分离项目经常运行在不同端口下，这里我们使用nginx代理转发下，将前端项目和后端项目转发到统一接口。例如，我前端项目运行在8080端口下，后端项目运行在8000端口下，就可以这样配置nginx的配置文件。

3.django后台url.py代码如下：

from django.contrib import admin
from django.urls import path
from app.views import *

urlpatterns = [
    path('api2/admin/', admin.site.urls),
    path('api2/post_test',postTest),
    path('api2/get_token',getToken)
]

4.前端具体请求代码如下：

              let that=this;
              const url='http://127.0.0.1/api2/get_token';
              this.axios.get(url).then(res=>{
                // 先获取后台cookie
                let csrftoken=that.$cookie.get('csrftoken');
                const url='http://127.0.0.1/api2/post_test';
                // post 请求后台接口
                this.axios.post(url,{},{
                  headers:{
                    'X-CSRFtoken':csrftoken
                  }
                }).then(res=>{
                  console.log(res.data);
                })
              })

最后，访问http://127.0.0.1查看效果就可以了。

5.测试成功如图：