Как я могу отправить форму с пользовательскими заголовками

Question

У меня есть конечная точка API GET для загрузки файла CSV:

GET /api/v1/reports/report.csv

• У него есть два параметра: start_date и end_date
• Он проверит api-key в заголовке запроса.

Так что я могу использовать почтальон для отправки GET запроса с api-ключом в заголовках для загрузки файла.

---

Теперь на сайте есть форма.Пользователь может ввести start_date и end_date и нажать кнопку Download (отправить).

Мой вопрос: как мне вставить api-key в заголовок запроса?

Answer 1

Лучший способ сделать ваш API более подходящим для браузеров и передать api-ключ в get-параметре или в cookie.

Другой вариант - загрузить файл через ajax (это не будет отображать ход загрузки и т. Д.)потребуется скрытый элемент привязки:

<a id="stubAnchor" style="display: none"></a>

И js:

var req = new XMLHttpRequest();
req.open("GET", "/api/v1/reports/report.csv", true);
req.responseType = "blob";
req.setRequestHeader('Api-key', 'some_key')

req.onload = function (event) {
  var blob = req.response;
  var fileName = "report.csv";
  var contentType = req.getResponseHeader("content-type");

  if (window.navigator.msSaveOrOpenBlob) {
    // IE
    window.navigator.msSaveOrOpenBlob(new Blob([blob], {type: contentType}), fileName);
  } else {
    var el = document.getElementById("stubAnchor");
    el.href = window.URL.createObjectURL(blob);
    el.download = fileName;
    el.click();
  }
};
req.send();