Typescript: получить файл из API и прочитать его оригинальное имя файла - PullRequest
Новая
       12

Typescript: получить файл из API и прочитать его оригинальное имя файла

0 голосов
/ 04 апреля 2019

Я пытаюсь загрузить какой-нибудь файл Excel из API, который я создал в моем приложении реагировать на машинописный текст, используя метод fetch из tslib.Вот код загрузки: 

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)
  })
}

Как вы можете видеть, имя файла жестко закодировано a.download = 'Report.xlsx', но мне нужноназначить его на имя файла, который вернул API.Имя файла существует в заголовке ответа Response headers, но когда я пытаюсь прочитать его, getBlobCors метод ответа Я получаю null назад, на самом деле response.headers пусто ввсе. 

async response => {
      if (response.ok) {
        const fileName = response.headers.get('Content-Disposition') // null
        const headers = response.headers // Headers {}
        const blob = await response.blob()
        return blob
      }

Кто-нибудь знает, как прочитать имя файла из ответа или любой другой, который я могу получить?

1 Ответ

0 голосов
/ 05 апреля 2019

Потратив на это почти целый день, я нашел способ ее решить.Проблема была в моем бэк-энде.Из-за ограничения в доступе к заголовкам ответов при использовании Fetch API через CORS, где по умолчанию доступ разрешен только для предварительно определенного списка стандартных заголовков, таких как Content-Type, Content-Language, Last-Modified, Cache-Control, Expires и Pragma.Любые другие заголовки ответа должны быть явно включены на сервере.В моем случае серверной частью был ASP.NET Core, поэтому я добавил собственную политику CORS в файл Startup.cs 

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

и включил это правило в методе контроллера 

 [EnableCors("WithExposedContentDispositionHeader")]
 public async Task<IActionResult> GetExcelReport([FromQuery] ReportInput input) {...}
...