React Axios Delete方法传参报错403与post/patch传参差异咨询

核心原因是axios针对不同类型的HTTP请求，设计了不同的函数参数签名，两类方法的传参逻辑存在明显差异：

• POST/PUT/PATCH 类请求的参数签名
  这类方法在HTTP规范中默认用于提交请求体数据，所以axios为其设计了三参数结构：

  axios.post(url, [请求体data], [配置config])
  

  你之前在post中使用的写法之所以生效，就是因为第二个参数会被axios自动识别为请求体内容，第三个参数会被识别为全局配置（包含请求头、超时等设置）。
• DELETE/GET/HEAD 类请求的参数签名
  这类方法在传统HTTP设计中通常不需要携带请求体，所以axios为其设计了双参数结构：

  axios.delete(url, [配置config])
  

  这类方法没有单独的请求体参数位置，所有配置（包括请求头、自定义请求体、超时时间等）都必须放到第二个参数的配置对象中。

第一种写法报错的原因 #

你给axios.delete传入了三个参数，axios只会将第二个参数{password: password}识别为整体配置对象，第三个参数的headers配置会被直接忽略：

1. CSRF Token没有被正确添加到请求头中，后端CSRF校验不通过，直接返回403错误
2. 密码参数没有放在配置的data字段中，axios不会将其识别为请求体内容，后端无法获取密码参数，权限校验进一步失败。

第二种写法生效的原因 #

你将所有配置都统一放到了第二个参数的配置对象中，显式声明了headers和data字段：

1. CSRF Token被正确携带到请求头中，通过后端CSRF校验
2. 密码参数被放到了data字段内，axios会将其序列化为请求体内容传递给后端，密码校验通过，因此请求正常返回。

补充提示 #

如果需要给DELETE/GET这类默认不带请求体的方法传递请求体数据，必须显式在config配置中声明data字段，不能复用POST类方法的传参写法。 #

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