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.测试成功如图: