DRF 前后端分离项目如何解决CSRF 数据交互
★ 背景说明
在Django REST framework (DRF) 前后端分离项目中,解决CSRF问题通常有以下几种方法:
1. 禁用CSRF验证,但这会降低安全性。(不推荐)
2. 使用csrftoken cookie
3. 在前端每次 POST、PUT 或 DELETE 请求前先发起一个GET请求(GET请求不需要经过CSRF检查)获取CSRFToken并将响应中的CSRFToken添加到新的请求头中。(推荐)
★ 解决思路
方案二
步骤一: 在返回给浏览器(客户端)的响应中设置 csrftoken相关的 Cookie信息(需要保证csrftoken在有效期内)
步骤二:在发送请求前获取最新的CSRF token,并且在前端的每次请求中都包含了这个token
// 首先,获取CSRF token function getCookie(name) { let cookieValue = null; if (document.cookie && document.cookie !== '') { const cookies = document.cookie.split(';'); for (let i = 0; i < cookies.length; i++) { const cookie = cookies[i].trim(); // 假设CSRF cookie名为csrftoken if (cookie.substring(0, name.length + 1) === (name + '=')) { cookieValue = decodeURIComponent(cookie.substring(name.length + 1)); break; } } } return cookieValue; } const csrftoken = getCookie('csrftoken'); // 然后,配置axios全局默认值 axios.defaults.headers.common['X-CSRFToken'] = csrftoken; axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // 之后,所有通过axios发送的请求都会自动携带CSRF token
方案三
步骤一: 使用请求拦截器在每次 POST、PUT 或 DELETE 请求中前先发起一个GET请求获取CSRF token 添加到请求头中
// frontend.js import axios from 'axios'; const api = axios.create({ baseURL: '/api/', headers: { 'Content-Type': 'application/json' } }); api.interceptors.request.use(async config => { const { method } = config; if (method === 'post' || method === 'put' || method === 'delete') { const csrfToken = await getCSRFToken(); config.headers['X-CSRF-Token'] = csrfToken; } return config; }); async function getCSRFToken() { const response = await axios.get('/get-csrf-token/'); return response.data.csrfToken; } async function postData(url = '', data = {}) { const response = await api.post(url, data); return response.data; } postData('data/', { key: 'value' }) .then(data => { console.log(data); });
步骤二: 在Django后端中使用 Django REST framework 编写了类视图,实现返回csrftoken的逻辑
视图views.py
# views.py from rest_framework.views import APIView from rest_framework.response import Response from rest_framework import status from django.middleware.csrf import get_token class CSRFTokenView(APIView): def get(self, request): csrf_token = get_token(request) return Response({'csrfToken': csrf_token}) def post(self, request): # 处理 POST 请求的逻辑 return Response({'message': 'Data received'}, status=status.HTTP_200_OK)
路由urls.py
# urls.py from django.urls import path from .views import CSRFTokenView urlpatterns = [ path('get-csrf-token/', CSRFTokenView.as_view(), name='get_csrf_token'), path('api/data/', CSRFTokenView.as_view(), name='post_data'), ]
代码说明:
在这个完整的示例中,前端代码使用 axios 创建了一个名为 api 的实例,并通过请求拦截器自动添加 CSRF token 到请求头中。后端使用 Django REST framework 编写了类视图 CSRFTokenView,其中包含了获取 CSRF token 和处理 POST 请求的逻辑。最后,在 urls.py 中设置了两个路由,分别映射到获取 CSRF token 和处理 POST 请求的视图函数。