React前端向Django发送POST请求报401，求排查可能原因

嘿，我一眼就发现你这段axios请求的写法有问题啦！这大概率就是导致401未授权的核心原因。

核心问题：Axios POST请求的参数顺序错误 #

你现在的请求代码是：

axios.post(`songs/${id}/like`, { headers: { Authorization: `Token ${token}` }})
  .then()
  .catch();

但Axios的post方法参数顺序是固定的：
axios.post(url, data, config)

• 第一个参数：请求的目标URL
• 第二个参数：要发送的请求体数据（如果接口不需要请求体，可传null或空对象{}）
• 第三个参数：请求配置对象（包含headers、params等设置）

你把headers配置放在了第二个参数的位置（本该放请求体的地方），导致后端完全接收不到Authorization请求头，自然会返回401未授权。

修正后的正确代码 #

调整参数顺序，把headers放到第三个配置参数里即可：

axios.post(`songs/${id}/like`, {}, { 
  headers: { Authorization: `Token ${token}` }
})
.then(response => {
  // 处理成功响应逻辑
})
.catch(error => {
  // 处理错误逻辑
});

如果这个接口本来就不需要请求体数据，第二个参数传空对象{}或者null都可以，关键是要让headers处于正确的配置位置。

额外快速检查点（虽然你其他请求正常，但可以快速确认） #

• 确认axios是否配置了正确的baseURL：如果其他GET请求依赖了baseURL配置，那songs/${id}/like的相对路径是没问题的；如果没配置baseURL，可能需要补充完整域名前缀（比如http://localhost:8000/songs/${id}/like），不过你说Postman用相同URL正常，这个可能性不大。
• 确认Token值是否完全一致：可以在React里用console.log(token)输出看看，是不是和Postman里粘贴的Token完全匹配（有没有多余的空格、引号之类的小问题）。

内容的提问来源于stack exchange，提问作者Anoop K George