axios Blob转换后无法访问响应对象NOT AUTHORIZED相关信息

olhwl3o2  于 2023-01-13  发布在  iOS
关注(0)|答案(1)|浏览(179)

在我的react应用程序中,我使用以下方法下载一个使用axios的文件。

方法1:

axios.post('api/downloadMyFile', data, { responseType: 'blob' })
.then(blob=>{
  const url = window.URL.createObjectURL(blob.data); 
  const a = document.createElement('a');
  a.href = url;
  a.download = "download.zip"  
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
})

最初我使用的是“方法2”,但后来不得不改为“方法1”,原因如下:
Axios返回的response.data是一个JSON字符串。因此,从该JSON创建Blob不会生成正确的对象。更多信息请参见我的上一个线程。

方法2:

axios.post('api/downloadMyFile',
    data
  ).then((response) => {

      console.log("Response testing ");
      console.log(response.data);

    }

我改用“方法一”后遇到的问题如下:
在某些情况下,webservice调用可以在response.data中返回NOT AUTHORIZED。但是由于在“方法1”中我告诉Axios以Blob的形式提供响应,所以我在console.log(blob)中看到的是以下内容:

如果我一直在使用“方法2”,并且有NOT_AUTHORIZED的场景,我会在console.log(response)中看到类似这样的内容:

Object { data: "NOT_AUTHORIZED: you are not allowed to download this file", status: 200, statusText: "", headers: {…}, config: {…}, request: XMLHttpRequest }

考虑到我使用的是方法1,我如何访问NOT_AUTHORIZED相关信息?

ux6nzvsh

ux6nzvsh1#

后端应该返回一个特定的状态代码,如422,以标记此响应不是ok,并且有关错误的额外信息将在JSON中发送。
在前端,您可以尝试将response.data.text()解析为JSON,然后读取errorCode或errorMessage以检测无法下载此文件的详细原因。
下面是对我有效的示例代码:

axios.post(`/tickets/download`, someFilterParams, {
  headers: {
    Authorization: `Bearer ${token}`,
    'Content-Type': 'application/json',
  },
  responseType: 'blob',
}).then(async (res) => {
  if (res.status !== 200) {
    const errorAsJSON = JSON.parse(await res.data.text());
    console.log('error: ', errorAsJSON);
  } else {
    // save file
  }
});

相关问题