React中使用axios发送请求头时header被放入body如何修正

错误原因 #

axios.post() 方法的参数顺序为 axios.post(url[, data[, config]])，其中：

• 第一个参数：请求地址
• 第二个参数：要发送的请求体（body）数据
• 第三个参数：请求配置项，可配置headers、超时时间等属性

你将headers配置放在了第二个参数的位置，因此axios会把它当作请求体内容发送，导致后端识别不到自定义请求头。

修改后的代码 #

export const envmailesqueci = async (
  credentials,
  setFieldError,
  setSubmitting
) => {
    await axios
      .post(
        "http://localhost:3003/users/forgotpassword",
        // 第二个参数传入请求体，无请求体则传空对象
        {}, 
        // 第三个参数传入配置项，headers放此处
        {
          headers: {
            email: credentials.email
          }
        }  
      ).then((response) => {
        setSubmitting(false);
        // 此处保留你原有剩余逻辑即可
      })
}

补充注意事项 #

• 如果你当前请求本身就需要携带其他请求体参数，直接把参数填入第二个参数的空对象中即可，不要和headers配置混淆
• 若前端和后端接口跨域，需要后端在CORS配置中允许email这个自定义请求头，否则会触发预检请求失败，自定义头无法正常传递

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