从Node Express服务端获取.ico文件时遇TypeError: res.blob is not a function问题

你的问题核心出在Axios响应的使用方式错误、服务端路由路径不匹配，以及响应头设置干扰前端处理这三个点上，下面是具体修正方案：

客户端代码修正 #

Axios的响应结构和原生Fetch不同：res是Axios封装的响应对象，真正的响应体存在res.data中；且当你设置responseType: 'blob'后，Axios已经自动把响应体解析成Blob类型了，不需要再调用blob()方法（这个方法是原生Fetch的Response对象独有的）。

修正后的客户端代码：

async function getIcon() {
    try {
        // 必须在请求配置里明确设置responseType: 'blob'
        const res = await axios.get(`${BASE_URL}/file/icon`, { responseType: 'blob' });
        // res.data已经是Blob类型，直接返回即可
        return res.data;
    } catch (error) {
        console.error('获取图标失败:', error);
        throw error; // 建议抛出错误而非返回，方便上层逻辑处理异常
    }
}

服务端代码修正 #

1. 修复路由路径：原代码中router.get('file/icon/', ...)缺少开头的斜杠，会导致路由无法正确匹配请求，应改为router.get('/file/icon/', ...)。
2. 调整响应头：如果不需要浏览器自动下载图标（而是要在前端展示），把Content-Disposition设为inline，或者直接去掉这个响应头，避免干扰前端对Blob的处理。
3. 优化文件传输：用res.sendFile替代fs.readFileSync，它是异步流式传输，不会把整个文件加载进内存，性能更优。

修正后的服务端代码：

router.get('/file/icon/', (req, res) => {
    try {
        const pathToIcon = path.join(APP_DIR, 'public', 'icon', 'my-icon-file.ico');
        res.setHeader('Content-Type', 'image/x-icon');
        // 若不需要触发下载，改为inline或删除此行
        res.setHeader('Content-Disposition', 'inline; filename=filename.ico');
        res.sendFile(pathToIcon);
    } catch (error) {
        console.error('读取图标文件失败:', error);
        res.status(500).send("获取.ico文件失败");
    }
});

额外说明 #

你之前拿到的res是字符串，大概率是因为服务端路由没匹配上，返回了404页面的HTML字符串，所以优先修复路由路径的斜杠问题。

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