React Native Axios调用登录接口返回401错误Postman请求正常

• React Native应用调用登录接口/api/login时，Axios持续返回401错误，报错信息为AXIOS ERROR: [Error: Request failed with status code 401] BAD_REQUEST
• 后端Docker日志打印查询用户的SQL后提示User Not Found In Database，但传入的账号对应的用户确实存在于数据库中，使用完全一致的用户名、密码在Postman中调用该接口可正常返回access_token和refresh_token

后端日志内容如下：

app_1       | 2022-06-23 20:56:55.997 ERROR 1 --- [nio-8080-exec-3] c.r.hamsafar.service.UsersServiceImpl    : User Not Found In Database
app_1       | Hibernate:
app_1       |     select
app_1       |         users0_.id as id1_1_,
app_1       |         users0_.activation_code as activati2_1_,
app_1       |         users0_.active as active3_1_,
app_1       |         users0_.disabled as disabled4_1_,
app_1       |         users0_.failed_try_count as failed_t5_1_,
app_1       |         users0_.family as family6_1_,
app_1       |         users0_.lock_time as lock_tim7_1_,
app_1       |         users0_.name as name8_1_,
app_1       |         users0_.national_code as national9_1_,
app_1       |         users0_.password as passwor10_1_,
app_1       |         users0_.sms_time as sms_tim11_1_,
app_1       |         users0_.username as usernam12_1_
app_1       |     from
app_1       |         users users0_
app_1       |     where
app_1       |         users0_.username=?

原有问题代码如下：

var formData = new FormData();
  formData.append('username', '0123456789');
  formData.append('password', '0123456789');
  axios.post(
    'http://1.2.3.4:5555/api/login'
    , { formData })
    .then(response => {
          console.log("RESPONSE RECEIVED: ", response);
        })
        .catch((err) => {
          console.log("AXIOS ERROR: ", err);
        })

代码中Axios传参时错误地将FormData实例包裹在普通JS对象中传入，实际发出的请求体结构为{ formData: FormData实例 }，后端无法从请求中解析到username、password字段，执行用户查询SQL时传入的username参数为空，自然匹配不到数据库中存在的用户，最终返回401错误。
部分React Native环境下，Axios不会自动为FormData请求添加正确的Content-Type头，也会导致后端无法解析表单参数。

• 抓包对比Postman正常请求和RN端异常请求的请求体结构，可直接发现两者传参格式差异：Postman直接传递表单项，异常请求将FormData嵌套在普通对象属性中
• 核对后端接口的参数接收格式，确认要求的Content-Type类型和字段名
• 检查Axios请求的配置项，确认参数位置、请求头与接口要求匹配

1. 移除包裹formData的外层大括号，直接将FormData实例作为axios.post的第二个参数传入
2. 手动为请求添加multipart/form-data类型的Content-Type头，适配RN环境的请求行为

修正后的可运行代码：

const formData = new FormData();
formData.append('username', '0123456789');
formData.append('password', '0123456789');
axios.post(
  'http://1.2.3.4:5555/api/login',
  formData,
  {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }
)
.then(response => {
  console.log("RESPONSE RECEIVED: ", response);
})
.catch((err) => {
  console.log("AXIOS ERROR: ", err);
})

如果后端要求的参数格式是application/x-www-form-urlencoded，可以将FormData替换为URLSearchParams实例传参，对应Content-Type修改为application/x-www-form-urlencoded即可。

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