React中携带Authorization Token的Axios Delete请求失效问题

核心原因：Axios Delete方法参数格式错误 #

Axios的delete方法参数规范是axios.delete(url[, config])，你当前把请求数据作为第二个参数、请求头配置作为第三个参数，不符合API要求，导致请求头未被正确携带到后端。

修正后的代码 #

const deletefile = (e) => {
    const headers = {
      Authorization: `Token ${sessionStorage.getItem("token")}`,
    };
    console.log(headers);
    const requestData = {
      id: e,
    };
    axios
      .delete("file/", {
        headers: headers,
        data: requestData // 请求数据需放在config的data字段中
      })
      .then(() => {
        alert("提交成功");
        // setRefresh(Refresh + 1);
      })
      .catch((error) => {
        // 优化错误提示，显示更具体的信息
        alert(error.response?.data?.message || error.message);
      });
};

额外排查方向 #

• 打开浏览器开发者工具的Network面板，查看实际DELETE请求的Authorization请求头是否与你console.log的内容一致，确认token未丢失或格式错误
• 检查后端是否支持接收DELETE请求的请求体，部分后端框架默认不解析DELETE请求的请求体，需额外配置
• 若存在跨域场景，确认后端CORS配置已允许携带Authorization请求头

从你提供的截图来看，请求明确返回无权限错误，说明后端未接收到正确的Authorization头，修正参数格式后即可解决该问题。

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