"TypeError: res.blob is not a function"当我尝试将.ico文件从服务器端(Node ExpressJs)获取到客户端(ReactJS)时

Question

我的应用程序是用客户端的ReactJs和服务器端的NodeJs express编写的。当我尝试获取.ico文件并使用以下代码在客户端显示它时:

客户端:

async function getIcon() {
try {
const res = await axios.get(`${BASE_URL}/file/icon`);
const blob = res.blob()
return blob
} catch (error) {
return error
}
}

服务器端:

router.get('file/icon/', (req, res) => {
try {
const pathToIcon = path.join(${APP_DIR}, 'public', 'icon', 'my-icon-file.ico')
const file = fs.readFileSync(pathToIcon)
res.setHeader('Content-Type', 'image/x-icon')
res.setHeader('Content-Disposition', 'attachment; filename=filename.ico')
res.send(file)
} catch (error) {
res.status(400).send("Problem to get .ico file")
}
})

我得到这个错误:

TypeError: res.blob is not a function．由于某些原因res是字符串类型，并且包含许多字符。

我如何解决这个问题，这样res将包含'blob'方法。

我也试过(在客户端):

async function getIcon() {
try {
const res = await axios.get(`${BASE_URL}/file/icon`,{responseType: 'blob'});
const blob = res.blob()
return blob 
} catch (error) {
return error
}
}

但是行不通。

Answer 1

除非绝对必要，否则不需要res.blob，所以您可以使用res.text来代替并设置标题。

所以…如果你真的需要为您的目的使用blob:

router.get('file/icon/', (req, res) => {
try {
const pathToIcon = path.join(${APP_DIR}, 'public', 'icon', 'my-icon-file.ico')
const file = fs.readFileSync(pathToIcon)
res.setHeader('Content-Type', 'image/x-icon')
res.setHeader('Content-Disposition', 'attachment; filename=filename.ico');
var blobbed = new Blob([file], [type: 'image/x-icon'])
res.send(blobbed)
} catch (error) {
res.status(400).send("Problem to get .ico file")
}
})

另外，我还没有亲自测试过这些，但是如果你遇到任何错误，请随时告诉我。