尝试从锚标记下载时出现授权失败错误

Question

当我在 PostMan 中尝试时，我可以通过将令牌添加到标题来下载文件。 我找不到在标题上添加令牌的方法。 那是应该在前端还是后端？

反应js

<a
  href={process.env.REACT_APP_BACKEND_URL +`/files/download/${props.id}`}
  rel="noreferrer"
  target="_blank"
  download
  className="download-link"
  >
   Download File
</a>

快递js：

router.get('/download/:fid', async (req, res, next) => {
  const fileId = req.params.fid;
  let filePost;
  try {
    filePost = await File.findById(fileId);
  } catch (err) {
    return next(new HttpError("Error", 500));
  }
  console.log(filePost.file);
  res.download(filePost.file);
);

Answer 1

使用纯 HTML（ <a>锚点或<form> ）下载资源只会产生带有“标准”标头（如Accept-Language或Accept-Encoding ）的请求，而不是带有令牌标头的请求。 因此，您尝试使用纯 HTML 是不可能的。

你可以做什么它使用 Javascript 函数fetch发出请求，并将响应转换为使用URL.createObjectURL的下载 URL。 然后可以将此下载 URL 分配给用户可以单击的锚元素。

fetch(`${process.env.REACT_APP_BACKEND_URL}/files/download/${props.id}`,
  {headers: {...}})
.then(function(response) {
  document.getElementById("anchor").download =
    response.headers.get("Content-Disposition").match(/filename="(.*)")/)[1];
  return response.blob();
})
.then(function(blob) {
  document.getElementById("anchor").href = URL.createObjectURL(blob);
});

Answer 2

您需要使用Http Client在标头中发送令牌。

const handleDownload = async () => {
  const res = await fetch(`${process.env.REACT_APP_BACKEND_URL}/files/download/${props.id}`, {
    headers: {
      token: '<your token>'
    }
  });
  const json = await res.json();
  console.log(json.data);
};

<a
  onClick={handleDownload}
  rel="noreferrer"
  target="_blank"
  download
  className="download-link"
  >
   Download File
</a>

我强烈建议您将标签转换a button 。