React 与 Django 之间的跨域请求 403 禁止错误：如何轻松解决

python

2024-03-07 03:05:48

React 和 Django 之间的跨域请求 403 禁止错误：详尽指南

简介

在使用 React 和 Django 构建应用程序时，可能会遇到跨域请求 (CORS) 问题，导致前端应用程序无法向后端应用程序发送请求。本文将逐步指导您解决此错误，确保应用程序顺利运行。

理解 CORS 错误

CORS 是一种安全机制，用于防止恶意脚本向不同域名的网站发送请求。当前端和后端应用程序在不同的端口和域上运行时，就会触发 CORS 错误。

解决 CORS 403 禁止错误

解决 CORS 错误涉及配置后端应用程序以允许来自前端应用程序的请求。以下步骤提供了详细指南：

步骤 1：安装 CORS 相关库

在 Django 项目中，使用 pip 安装 django-cors-headers 库。

步骤 2：添加 CORS 中间件

在 Django 的 settings.py 文件中，将 corsheaders.middleware.CorsMiddleware 添加到 MIDDLEWARE 设置中。

步骤 3：配置 CORS 允许列表

将前端应用程序的 URL 添加到 CORS_ALLOWED_ORIGINS 设置中，允许前端应用程序发送请求。

步骤 4：设置允许的 HTTP 方法和标头

配置允许前端应用程序使用的 HTTP 方法和标头，例如 GET、POST 和 Content-Type。

步骤 5：启用凭证

如果应用程序需要使用凭证进行身份验证，请启用 CORS 凭证，允许会话 cookie 跨域发送。

步骤 6：重新启动 Django 服务器

应用更改后，重新启动 Django 服务器以使更改生效。

步骤 7：验证配置

向后端应用程序发送一个跨域请求以验证配置是否正确。您应该会收到一个成功的响应（例如，200 状态代码）。

React 和 Django 代码示例

以下是更新后的 React 和 Django 代码示例，演示如何解决 CORS 问题：

React 登录函数

function submitLogin(e) {
  e.preventDefault();
  client.post(
    "/api/login",
    {
      username: username,
      password: password
    },
    {
      withCredentials: true,
      headers: {
        'Content-Type': 'application/json',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }
  ).then(response => {
    if (response.status === 200) {
      navigate("/student-view", {replace: true});
    }
    return response;
  }).catch(err => {
    console.log("Error", err)
  })
}

Django 视图

from django.views.decorators.csrf import csrf_exempt

class UserLogin(APIView):
  @csrf_exempt
  def post(self, request):
    data = request.data
    serializer = LoginSerializer(data=data)
    if serializer.is_valid(raise_exception=True):
      user = serializer.check_user(data)
      login(request, user)
      return Response(serializer.data, status=status.HTTP_200_OK)