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.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 请求的视图函数。
来源:https://www.cnblogs.com/cs-songbai/p/18289072
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]