Django REST Framework端点在React Axios请求中出现未授权问题

核心问题分析 #

1. Axios请求参数格式错误 #

axios.post的参数结构是axios.post(url, 请求数据, 配置对象)，你当前把请求头和请求数据都放在了第二个参数里，导致Authorization头没有被正确携带到请求中，后端无法识别用户身份，返回未授权。

2. Django DRF dispatch方法的潜在问题 #

直接读取request.body会消耗请求体的数据流，DRF的认证机制依赖完整请求流解析认证信息，提前读取可能导致后续认证流程异常（虽Postman测试正常，但属于代码隐患）。

解决方案 #

修正React Axios请求代码 #

调整参数顺序，将请求数据作为第二个参数，请求头放在第三个配置参数中：

useEffect(() => {
    axios.post(
        'http://127.0.0.1:8000/user/profile/',
        { // 第二个参数：请求数据
            "username": "Caution1",
            "password": "Caution123"
        },
        { // 第三个参数：配置对象，包含请求头
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${token}`
            }
        }
    ).then(response => {
        setData(response.data);
        console.log(response.data); // 注意：setData是异步操作，直接打印data无法获取最新值
    }).catch(err => {
        console.error(err.response); // 增加错误捕获，方便排查问题
    });
}, [token]); // 依赖项加入token，避免token未加载时发起请求

修正Django DRF的Profile视图 #

不要手动解析request.body，直接使用DRF已解析好的request.data，优化dispatch方法逻辑：

from rest_framework.views import APIView
from rest_framework.permissions import IsAuthenticated
from rest_framework.response import Response

class Profile(APIView):
    permission_classes = [IsAuthenticated]

    def dispatch(self, request, *args, **kwargs):
        # DRF已自动解析请求体，直接使用request.data即可
        self.data = request.data
        return super().dispatch(request, *args, **kwargs)
    
    # 补充post方法示例（原代码未贴出，需确保实现）
    def post(self, request, *args, **kwargs):
        # 使用self.data处理业务逻辑
        return Response({"message": "请求成功", "received_data": self.data})

额外检查项 #

• 确认React中token变量在请求发起时已正确获取，无空值或未定义情况
• 检查Django的CORS配置，确保CORS_ALLOW_HEADERS包含Authorization（默认已包含，可显式配置）：

# settings.py
CORS_ALLOW_HEADERS = [
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'origin',
    'user-agent',
]

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