打字稿：从API提取文件并读取其原始文件名

Question

我正在尝试使用tslib中的fetch方法从我在react-typescript应用程序中创建的API中下载一些Excel文件。 这是下载代码：

SELECT
  migrated_id,
  DATE_FORMAT(month, '%b') AS month,
  value
FROM migrated
LIMIT 2000

正在从这里调用此方法：

export const getBlobCors = url =>
  tryAjax<Blob>(
    () =>
      fetch(url, {
        credentials: 'omit',
        headers: new Headers({
          ...getAuthHeader(),
          responseType: 'blob'
        })
      }),
    async response => {
      if (response.ok) {
        const blob = await response.blob()
        return blob
      } else {
        throw new Error(DefaultErrorMsg)
      }
    }
  )

您现在可以看到，文件名是硬编码的async function downloadReport(urlData: ReportUrlData) { const url = reportUrl(urlData) const blob = await getBlobCors(url) const blobUrl = window.URL.createObjectURL(blob) const a = document.createElement('a') a.style.display = 'none' a.href = blobUrl a.download = 'Report.xlsx' document.body.appendChild(a) a.click() setTimeout(() => { document.body.removeChild(a) window.URL.revokeObjectURL(blobUrl) }) } ，但是我需要将其分配给api返回的文件名。 该文件名确实存在于响应头中 但是当我尝试读取响应时的a.download = 'Report.xlsx'方法时，我又回来了getBlobCors，实际上null根本是空的。

response.headers

有人知道如何从响应中读取文件名，或者我能得到它的任何其他文件？

Answer 1

花了几乎一整天的时间，我找到了解决问题的方法。问题出在我的后端。由于使用基于CORS的Fetch API时访问响应标头的限制，默认情况下，默认情况下，访问仅允许访问标准标头的预定义列表，例如Content-Type，Content-Language，Last-Modified，{{1 }}，Cache-Control和Expires。需要在服务器上显式启用任何其他响应头。在我的情况下，后端是ASP.NET Core，因此我在Startup.cs中添加了自定义CORS策略。

Pragma

并在控制器方法上启用此规则

services.AddCors(o => o.AddPolicy("WithExposedContentDispositionHeader", builder =>
{
     builder
     .AllowAnyOrigin()
     .WithExposedHeaders("content-disposition");
}));