Angular получить файл от API - PullRequest
Новая
       13

Angular получить файл от API

0 голосов
/ 10 апреля 2020

Мой API генерирует PDF-файл и возвращает его. Заголовки, которые я получаю в почтальоне: ... 

Content-Type →application/pdf
Content-Length →2099
Content-Disposition →attachment; filename=Ticket_20200409210413358621_Home_3.pdf
Cache-Control →public, max-age=43200
Expires →Fri, 10 Apr 2020 09:04:13 GMT
Access-Control-Allow-Origin →*

И я могу без проблем сохранить содержимое файла из почтальона.

Однако, когда я пытаюсь получить это в angular там Это проблема.

Я устанавливаю заголовки как ... 

setRequestHeaderPDF() {
  return new HttpHeaders({
    'Authorization': 'Bearer ' + localStorage.getItem('id_token'),
    'Content-Type': 'application/pdf',
    'Accept': 'application/pdf'
  })
}

Затем я пробую две разные вещи.

Сначала идет с responseType: 'blob'. Это возвращает блоб без проблем. Проблема, как вы можете видеть выше, заключается в том, что имя файла находится в заголовках ответа. С ответом большого двоичного объекта я не могу получить заголовки.

Во-вторых, я не устанавливаю responseType и надеюсь получить его из текста / тела ответа, но это выдает следующую ошибку

сообщение: «Неожиданный токен% в JSON в позиции 0» стек: «SyntaxError: Неожиданный токен% в JSON в позиции 0↵ в JSON .parse () ↵ в XMLHttpRequest.l»

Итак, мой вопрос: как я могу получить файл из API и получить доступ к заголовкам и данным?

1 Ответ

0 голосов
/ 10 апреля 2020

Обновление: оказывается, что прокси-сервер аутентификации должен был удалить заголовки или что-то в этом роде. Когда я обошел это, я теперь могу получить файл просто отлично.

Что ж, я обнаружил, что при использовании CORS вы должны выставлять определенные заголовки. API находится в python flask, поэтому я добавил CORS(app, expose_headers=['Content-Disposition', 'x-suggested-filename'], как ответ здесь Как изменить имя загрузки в flask?

В почтальоне я получаю 

Content-Type →application/pdf
Content-Length →2093
Content-Disposition →attachment; filename=Ticket_20200410171501039158_Home_3.pdf
Cache-Control →public, max-age=43200
Expires →Sat, 11 Apr 2020 05:15:01 GMT
x-suggested-filename →Ticket_20200410171501039158_Home_3.pdf
Access-Control-Allow-Origin →*
Access-Control-Expose-Headers →Content-Disposition, x-suggested-filename
Via →1.1 google
Alt-Svc →clear

И в моем приложении angular я переключился на использование XMLHttpRequest () для этого. 

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('id_token'));
xhr.setRequestHeader('Content-Type', 'application/pdf');
xhr.setRequestHeader('Accept', 'application/pdf');
xhr.responseType = 'blob';
xhr.onload = function (this, event) {
    var blob = this.response;
    console.log(this.getAllResponseHeaders());
    var contentDispo = this.getResponseHeader('Content-Disposition');
    var fileName = contentDispo.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];
    saveAs(blob, fileName);
}
xhr.send();

Кажется, сейчас это работает.

...