React对接Django登录接口出现403 Forbidden错误求助

一、前端代码问题修正 #

1. 错误携带响应头：Access-Control-Allow-Origin是后端返回给前端的响应头，前端发起请求时不需要携带，强行添加会触发浏览器CORS校验异常，直接删除该头：
2. 拼写错误：response. Data里的空格会导致前端代码报错，修正为response.data；
3. 参数未复用：函数传入的username和password未实际使用，改为动态传参（可选优化）。

修改后前端代码：

const login = (username, password) => {
  return axios
    .post(
      API_URL + "signin/",
      {
        username: username,
        password: password,
      },
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    )
    .then((response) => {
      if (response.data.accessToken) {
        localStorage.setItem("user", JSON.stringify(response.data));
      }

      return response.data;
    });
};

二、后端核心问题修复 #

1. DRF权限限制导致403：Django REST Framework默认权限为IsAuthenticated，即需要登录才能访问接口，但登录接口本身就是给未登录用户用的，必须添加AllowAny权限：
2. JsonResponse返回格式错误：直接传字符串username会抛出异常，需改为字典格式。

修改后views.py代码：

from rest_framework.decorators import api_view, permission_classes
from rest_framework.permissions import AllowAny
from django.http import JsonResponse

@api_view(['POST'])
@permission_classes([AllowAny])  # 允许未登录用户访问
def signin(request):
    username = request.data.get('username')
    password = request.data.get('password')
    print(username,"  ",password)

    return JsonResponse({'username': username})  # 返回字典格式

三、可选全局配置优化 #

如果需要全局开放部分接口权限，可在settings.py中添加DRF配置：

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
}

四、CORS配置验证 #

你的settings.py中CORS配置基本正确，只需确认CorsMiddleware的顺序：必须放在django.middleware.security.SecurityMiddleware之后，django.middleware.common.CommonMiddleware之前，当前配置符合要求。

内容的提问来源于stack exchange，提问作者Param