CSRFTokenwithDjangobackendandReactfrontend

在Django后端设置CSRF保护，并在React前端发送请求时手动附加CSRF令牌。具体步骤如下：

1. 在Django后端的settings.py文件中设置CSRF保护：

MIDDLEWARE = [
    # ...
    'django.middleware.csrf.CsrfViewMiddleware',
    # ...
]

2. 在前端发送请求时，使用Django生成的CSRF令牌并将其添加到请求头中。以下是使用axios发送POST请求时的示例代码：

import axios from 'axios';

function postData(data) {
  const csrfToken = document.cookie.match(/csrftoken=([^;]+)/)[1];
  const headers = {
    'X-CSRFToken': csrfToken,
    'Content-Type': 'application/json',
  };
  return axios.post('/api/post/', data, { headers });
}

此代码中，从cookie中获取了名为"csrftoken"的CSRF令牌，并将其添加到请求头中的X-CSRFToken字段中。

重点提示：在给头部添加CSRF令牌时，一定要确保令牌名称与服务器所需的名称相同。如果不同，将导致CSRF防护机制无效！

3. 在Django中处理前端请求：

from django.views.decorators.csrf import csrf_exempt
from django.http import JsonResponse

@csrf_exempt
def post_data(request):
    if request.method == 'POST':
        # 在此处处理请求
        return JsonResponse({'status': 'OK'})

此代码中，使用@csrf_exempt装饰器来在Django后端取消针对post_data视图函数的CSRF保护。注意，只有不需要保护的视图函数才应该使用此装饰器。

这样，当React前端向post_data视图函数发送POST请求时，就能够正确地处理与验证CSRF令牌了。