在 DOM 元素发起的请求上设置请求标头答案

【问题标题】：Setting Request Header on DOM element initiated requests在 DOM 元素发起的请求上设置请求标头
【发布时间】：2015-03-11 21:45:51
【问题描述】：

我正在尝试通过在所有传出请求上设置自定义请求标头来跟踪通过应用程序发出的所有请求。我能够做到这一点：

$ajax.Setup(
    beforeSend: ...

但是，当 dom 元素（即 iframe、视频、对象等）上的 src 属性发起请求时，我遇到了问题。搜索时我发现：How to set custom http headers when changing iframe src? 但是，当我尝试这样做时，我无法让它启动下载对话框。该代码看起来像：

var request = $.ajax({
    context: this,
    url: URI,
    type: 'GET',
    statusCode: {
       200: function(data) {
           var id = '#download-iframe';
           var $iframe = $(id);
           if($iframe.length === 0) {
              $iframe = $('<iframe>')
                 .attr('id', 'download-iframe')
                 .appendTo('body');
           }
           $iframe.contents().find('html').html(data);
        }
     }
});

该请求的响应标头如下所示：

Content-Disposition:attachment; filename="PDF.pdf"
Content-Length:86712
Content-Type:application/pdf;charset=UTF-8

这会在 iframe 中显示原始数据，但不会启动下载。

A) （首选）通过设置 DOM 元素 src 以不同的方式设置请求标头或 B) 启动下载对话框。

【问题讨论】：

您使用 Javascript 将响应写入 iframe？那不会给你一个下载选项。让 iframe 自行加载 - 创建并插入一个 iframe，并将 src 设置为发送 PDF 的 URL。我对你的问题描述感到困惑，所以我可能是在谈论冥王星上的天气......
这就是我最初所做的，当我将 src 设置为 URL 时，DOM 启动了请求，绕过了 javascript，因此在 ajaxSetup 中配置的请求标头从未设置。
在这种情况下它不会工作。但是为什么不在请求头中添加一个参数呢？所以你仍然可以跟踪它。在任何情况下，将内容写入 iframe 都不是下载 - 浏览器如何知道是控制下载/保存文件对话框的那个？
是的，这与我的想法一致，这就是为什么我认为选项 A 是首选，以另一种方式在 dom 发起的请求上设置请求标头。

标签： javascript html ajax dom request-headers

【解决方案1】：

B) 启动下载对话框。

blob URI + <a download ...> + 合成点击事件可能会起作用

【讨论】：