如何发送带有自定义标题的表单

Posted 2023-05-09

【中文标题】如何发送带有自定义标题的表单

【英文标题】：How can I send a form with custom headers

【发布时间】：2019-06-24 21:21:30

【问题描述】：

我有一个GET api 端点来下载 CSV 文件：

GET /api/v1/reports/report.csv

它有两个参数：start_date和end_date 它将检查请求标头中的api-key。

所以我可以使用邮递员发送 GET 请求并在标头中使用 api-key 来下载文件。

---

现在网站上有一个表格。用户可以输入start_date和end_date并按下Download（提交）按钮。

我的问题是，如何在请求的标头中插入api-key？

【问题讨论】：

您无法通过 html 向标准表单提交添加标题。您可以通过 AJAX 请求来执行此操作，但这不能让您下载文件。假设您控制保存 CSV 内容的服务器，您需要将 api-key 值添加为查询字符串参数。

【参考方案1】：

最好的方法是让你的 API 更适合浏览器，并在 get-parameter 或 cookie 中传递 api-key。

其他选项是通过 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();