我有一个 React JS 应用程序,它作为后端有一个用 Node JS 制作的 API REST。
目前,我的目标是能够下载服务器上的文件。正确的行为应该是用户在点击“下载文件”后,应该收到文件(用浏览器下载)。
在服务器端,我有这样的东西(显然,我将通过删除 JWT 中间件、数据库查询等来简化它。):
const express = require('express');
const router = express.Router();
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
app.use(cors({ origin: "http://localhost:3000" }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
router.get('/download', (req, res, next) => {
res.download("\\\\folder\\subfolder\\myfile.txt");
});
app.use('/api', router);
const PORT = 3001;
app.listen(PORT, function() {
console.log("Server is running on port "+PORT);
});
然后,正如我所说,我有一个 React JS 应用程序作为前端工作:
apihelperdownload () {
return axios.get(API_URL + "download").then(function (response) {
return response;
})
}
.............
function downloadFile() {
apihelperdownload().then(
(res) => {
// Should I do something here with response?
},
(error) => {
}
)
}
<button className="download" onClick={() => downloadFile()}>
Download File
</button>
我的服务器上有两个文件,一个 TXT 和一个 JPG。两者都有正确的路径(我没有收到任何“找不到文件/路径”错误),并且在这两种情况下我都收到“200 状态正常”......但我无法下载文件。
还:
- 在 JPG 情况下,在网络选项卡中,在预览子选项卡上我可以看到图像(因此浏览器正在接收图像)。
响应如下所示:
(忽略参数和不同的url,只是这里没有简化)
- 在 TXT 情况下,在网络选项卡中,在预览子选项卡上,我只能看到一个白页。
响应如下所示:
如您所见,在第二种情况(.txt 文件)中,数据为“空”(“”)
数据是正确的文本.. 我没有保存 txt 文件.. 所以它是空的..
我已经检查了几个相关的问题,例如使用 Express 从 NodeJS 服务器下载文件
但不幸的是,我还没有找到如何解决我的问题。
1)我在服务器端做错了什么?
2)我与客户端的响应有什么关系?
谢谢