反应 axios 补丁请求给出 401 错误但提供了授权

Posted 2023-02-16

【中文标题】反应 axios 补丁请求给出 401 错误但提供了授权

【英文标题】：React axios patch request giving 401 error but authorization is provided

【发布时间】：2022-01-08 17:10:15

【问题描述】：

我正在尝试通过 axios 补丁请求将用户添加到组中。数据都是正确的，但即使我在标题中包含授权，我也会收到 401 错误。代码如下，非常感谢任何帮助。

    handleJoin = (e, group) => 
        e.preventDefault();
        axios.get('http://localhost:8000/core/current_user/', 
                headers: 
                    Authorization: `JWT $localStorage.getItem('token')`
                
        )
        .then((user) => 
            let group_data = new FormData();
            group_data.append('user', user.data.id);
            group_data.append('group', group.id);
            for (var value of group_data.values()) 
               console.log(value);
            
            axios.patch(`http://localhost:8000/core/usergroup/$user.data.id/`, 
                group_data,
                headers: 
                    Authorization: `JWT $localStorage.getItem('token')`,
                    'Content-Type': 'application/json',
                ,
            )
            .then((res) => 
                console.log(res.data);
            )
            .catch((err) =>  
                console.log(err);
            );
        )
        .catch((err) => 
            console.log(err);
        );
    

编辑：尝试重写请求并更改 group_data 变量的位置会停止 401 错误，但不会更改模型中的数据。

    handleJoin = (e, group) => 
        e.preventDefault();
        axios.get('http://localhost:8000/core/current_user/', 
                headers: 
                    Authorization: `JWT $localStorage.getItem('token')`
                
        )
        .then((user) => 
            let group_data = new FormData();
            group_data.append('user', user.data.id);
            group_data.append('group', group.id);
            for (var value of group_data.values()) 
               console.log(value);
            
            axios.patch(`http://localhost:8000/core/usergroup/$user.data.id/`, group_data,
                headers: 
                    Authorization: `JWT $localStorage.getItem('token')`,
                    'Content-Type': 'application/json',
                ,
            )
            .then((res) => 
                console.log(res.data);
            )
            .catch((err) =>  
                console.log(err);
            );
        )
        .catch((err) => 
            console.log(err);
        );
    

编辑：

我更改了处理程序，现在它正在更新组字段但完全覆盖它。当我尝试将组作为列表发送时，它会给出错误，期望一个代表 pk 的 int。所以我的问题是，有没有一种方法可以在不覆盖之前的信息的情况下修补模型。

以组值为 id 的处理程序

        e.preventDefault();
        axios.get('http://127.0.0.1:8000/core/current_user/', 
                headers: 
                    Authorization: `JWT $localStorage.getItem('token')`
                
        )
        .then((user) => 
                let group_data = new FormData();
                group_data.append('user', user.data.id);
                group_data.append('group', group.id);
                for (var value of group_data.values()) 
                   console.log(value);
                
                axios.patch(`http://127.0.0.1:8000/core/usergroup/$user.data.id/`, group_data,
                    headers: 
                        Authorization: `JWT $localStorage.getItem('token')`,
                        'Content-Type': 'application/json',
                    ,
                )
                .then((res) => 
                    console.log(res.data);
                )
                .catch((err) =>  
                    console.log(err);
                );
        )
        .catch((err) => 
            console.log(err);
        );
    

以组为列表的处理程序

handleJoin = (e, group) => 
        e.preventDefault();
        axios.get('http://127.0.0.1:8000/core/current_user/', 
                headers: 
                    Authorization: `JWT $localStorage.getItem('token')`
                
        )
        .then((user) => 
            axios.get(`http://127.0.0.1:8000/core/usergroup/$user.data.id/`, 
                headers: 
                    Authorization: `JWT $localStorage.getItem('token')`,
                    'Content-Type': 'application/json',
                
            )
            .then((usergroup) =>  
                let group_data = new FormData();
                let prev = usergroup.data.group
                prev.push(group.id);
                console.log(prev);
                group_data.append('user', user.data.id);
                group_data.append('group', prev);
                for (var value of group_data.values()) 
                   console.log(value);
                
                axios.patch(`http://127.0.0.1:8000/core/usergroup/$user.data.id/`, group_data,
                    headers: 
                        Authorization: `JWT $localStorage.getItem('token')`,
                        'Content-Type': 'application/json',
                    ,
                )
                .then((res) => 
                    console.log(res.data);
                )
                .catch((err) =>  
                    console.log(err);
                );
            )
        )
        .catch((err) => 
            console.log(err);
        );
    

后端是用 Django 编写的，我意识到问题可能出在前端而不是前端。我还发布了我的序列化程序和视图，以防它们可能是问题。任何帮助将不胜感激。

序列化器

    class UserGroupSerializer(serializers.ModelSerializer):
    groups = GroupSerializer(many=True, read_only=True,)

    class Meta:
        model = UserGroup
        fields = '__all__'

查看

        class UserGroupDetail(APIView):
        def patch(self, request, pk):
            usergroup = UserGroup.objects.get(pk=pk)
            serializer = UserGroupSerializer(instance=usergroup, data=request.data, partial=True)
            if serializer.is_valid():
                serializer.save()
                return Response(serializer.data, status=status.HTTP_201_CREATED)
            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

【参考方案1】：

您的授权标头应该是

Authorization: `Bearer $localStorage.getItem('token')`
           

【讨论】：

感谢您的回复！我已经尝试过了，但它仍然给我 401 错误。