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

Question

我正试图通过axios补丁请求将用户添加到组中。数据都是正确的，但我得到了一个401错误，即使我在标题中包含了Authorization。代码在下面，任何帮助都将不胜感激。

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);
});
}

编辑：

我更改了处理程序，现在它正在更新group字段，但完全覆盖了它。当我尝试将group作为列表发送时，它会出现错误，需要一个表示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)

Answer 1

您的授权头应该是

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