为何两个看似相同的Axios PUT请求一个报401错误另一个正常？

核心差异：参数结构不同 #

• 第一种用的是Axios的快捷请求方法（axios.put），第二种是通用请求方式（直接传配置对象给axios）
• 快捷方法的参数顺序是固定的：axios.put(请求地址, 请求体数据, 配置对象)；而通用方法是把所有请求信息（地址、方法、headers、数据等）都打包进一个配置对象里

第一种写法返回401的原因 #

你写错了axios.put的参数位置：

• 你把headers和data都放在了第二个参数里，但这个位置本来只应该放请求体data
• 真正的配置项（包括headers）需要放在第三个参数里，所以你的Authorization令牌根本没被加到请求头里，后端验证失败就返回了401未授权

修正后的第一种写法 #

把headers单独拎出来放到第三个参数：

const handleSubmit = () => {
  axios.put(`url`, data, {
      headers: {
        Authorization: `Token ${token}`,
        "Content-Type": "application/json",
      },
    })
    .then(function (response) {
      console.log(JSON.stringify(response.data));
    })
};

两种写法的适用场景 #

• 快捷方法：适合简单请求，写法简洁直观，不用写全量配置
• 通用方法：适合复杂请求，比如需要设置maxBodyLength、超时时间这类额外配置，或者请求方法需要动态切换的情况

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