React中使用带Authorization头的axios实现文件上传及进度条的方法

问题根因 #

axios.post 方法仅支持3个入参：请求地址、请求体、统一配置对象。你之前的修改中把进度配置opt和请求头配置拆成了两个参数传入，导致请求头配置被axios忽略，没有携带Authorization token才触发401未授权错误。

解决方法 #

将进度配置和默认请求头配置合并到同一个配置对象中传入axios.post即可，修改后的InsertData代码如下：

export const InsertData = async (req, opt) => {
  const url = `${appConfig.BASE_API}/insert`;
  let cookie = cookies.get('user')
  createAuthRefreshInterceptor(axios, refreshAuthLogic);  
  // 合并配置：传入的opt优先级更高，可覆盖默认配置
  const requestConfig = {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${cookie.token}`
    },
    ...opt
  }
  const result = await axios.post(url, req, requestConfig)
    .then(res => res.data)
    .catch(error => null)
  return result
};

你原有调用InsertData传入进度回调的代码不需要做任何修改，即可同时满足正常携带授权头请求和获取上传进度两个需求。

补充提示 #

如果你后续需要上传文件类的二进制内容，需要将Content-Type改为multipart/form-data，否则会出现请求体解析错误。

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