对接后端download接口报未知异常错误

news2024/12/23 6:42:41

你一定遇到过这种情况，在一个项目中下载功能明明好好的，下载接口调用方法与前端调用方法封装的好好的，可是换了一个接口，竟然搞罢工了，类似下面这样的，你会不会无从下手，不知道该怎么办呢？接下来我们就来说说这个问题。
在这里插入图片描述
一般接口报错主要有两个原因

后端接口问题
前端传参问题

首先要搞清楚是不是接口问题，可以在后端给出的接口文档调试页面进行调试，如果正常，那么大概率可以排除接口问题。比如像下面这样调用测试文档后返回了流数据，说明接口是正常的，那大概率是前端的问题了。
在这里插入图片描述
在前端开发中，调用API接口是常见的操作之一。正确地配置请求头（headers）和响应类型（responseType）对于确保请求的成功至关重要。下面详细解释这两个属性的设置及其作用。

Headers 设置

headers 是请求的一部分，它包含了客户端和服务端之间通信所需的信息，比如内容类型、认证信息等。在HTTP请求中，这些头部信息用于告诉服务器关于请求的一些元数据。

Content-Type: 这个头部字段用来描述请求体的格式。常见的值有：
- application/json: 表示请求体是一个JSON对象。
- application/x-www-form-urlencoded: 表示请求体是一个URL编码过的表单。
- multipart/form-data: 通常用于上传文件时，因为文件数据不能简单地编码为字符串。

例如，Content-Type 被设置为 application/x-www-form-urlencoded，这意味着如果请求体中有数据的话，应该以URL编码的形式发送。

Response Type 设置

responseType 是一个选项，用于指定期望的响应类型。默认情况下，大多数库如axios会自动解析响应为JSON对象。但是，有时候我们需要直接处理原始的响应数据，这时就需要设置responseType了。

arraybuffer: 响应数据会被转换成ArrayBuffer。
blob: 响应数据将会是一个Blob对象，适用于处理文件或多媒体数据。
document: 当响应内容为HTML或XML文档时使用。
json: 自动解析为JSON对象。
text: 响应数据将被视为纯文本。

例如，responseType 被设置为 blob，这意味着服务端返回的数据将作为二进制数据处理，而不是尝试解析为JSON。这对于下载文件尤其有用，因为文件通常是以二进制形式传输的。

示例

假设我们使用axios库来发送一个GET请求，并且我们知道响应将是一个文件，我们可以这样设置：

import axios from 'axios';

axios.get('/api/download', {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    responseType: 'blob'
})
.then(response => {
    // response.data 是一个 Blob 对象
    const blob = new Blob([response.data]);
    // 保存文件到本地
    saveAs(blob, 'example.pdf');
})
.catch(error => {
    console.error('Error downloading the file:', error);
});