移动端使用fetch与axios发送Bearer Token时API无法接收问题求助

现有代码错误点 #

• fetch版本错误 #

  1. 参数顺序错误：fetch API的调用规则为fetch(url, 配置对象)，请求体formData需要放在配置对象的body字段中，你错误将formData直接作为第二个参数传入，导致配置完全失效
  2. 手动设置multipart/form-data请求头：使用FormData发起请求时，浏览器/移动端原生环境会自动生成带boundary分隔符的Content-Type头，手动指定会丢失分隔符参数，后端无法正常解析表单
  3. 大概率缺失令牌前缀：大部分JWT认证接口要求Authorization头格式为Bearer ${token}，缺失前缀会导致后端无法识别令牌

• axios版本错误 #

  1. 参数顺序错误：axios.post的调用规则为axios.post(url, 请求体, 配置对象)，你错误将请求体和headers都封装到第二个参数对象中，导致请求体格式错误、headers未生效

修复后代码 #

fetch版本 #

uploadAttachment: async (file, id) => {
    const token = await AsyncStorage.getItem('token');
    // 先确认token已正常获取
    if (!token) throw new Error('令牌不存在，请重新登录');
    let formData = new FormData();
    formData.append('file', file, file.name);
    formData.append('sale', id); // 你之前定义的params没有用到，这里补上参数
    try {
      const req = await fetch(`${BASE_API}/sales/upload-attachment`, {
        method: 'POST',
        body: formData,
        headers: {
          // 按需添加Bearer前缀，和Web端请求头保持一致即可
          Authorization: `Bearer ${token}`,
          Accept: 'application/json',
        },
      });
      const json = await req.json();
      return json;
    } catch (err) {
      console.log(err);
      return err.error;
    }
  },

axios版本 #

uploadAttachment: async (file, id) => {
  const token = await AsyncStorage.getItem("token");
  if (!token) throw new Error('令牌不存在，请重新登录');
  let data = new FormData();
  data.append("file", file, file.name);
  data.append("sale", id); // 补上之前遗漏的sale参数
  try {
    let result = await axios.post(`${BASE_API}/sales/upload-attachment`, data, {
      headers: {
        Authorization: `Bearer ${token}`, // 和Web端保持前缀一致
        Accept: "application/json",
      },
    });
    console.log(result);
    return result.data;
  } catch (error) {
    console.error(error.response);
    throw error;
  }
};

额外排查点 #

如果修改后仍有问题，按以下顺序排查：

1. 打印AsyncStorage.getItem('token')的返回值，确认令牌非空、格式和Web端携带的令牌完全一致
2. 抓包查看移动端请求的头信息，确认Authorization头已正常携带，格式和Web端请求完全一致
3. 确认移动端没有本地代理、证书拦截等情况导致请求头被篡改

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