为 <img/> 标签发出的请求设置自定义标头答案

【问题标题】：Set custom header for the request made from <img/> tag为 <img/> 标签发出的请求设置自定义标头
【发布时间】：2015-01-15 23:39:43
【问题描述】：

假设我有这样的代码：

<img src='images/whatever.jpj' width='' height=''/>

如何为此请求配置自定义标头？

将不胜感激。

【问题讨论】：

与this重复

标签： javascript html

【解决方案1】：

您不能更改浏览器对<img> 标记加载的资源的HTTP 请求。无论您尝试做什么，都需要找到替代方法。

例如，您可以通过自己的服务器代理请求并在那里修改标头。或者您可以使用查询字符串参数化资源的 URL。

正如 Alex 指出的那样，您也可以使用 XmlHTTPRequest 对象来加载图像数据并使用 setRequestHeader 函数，尽管我怀疑您可以设置的标题有限（我怀疑您可以例如，欺骗引荐来源网址或用户代理，虽然我还没有测试过）。

【讨论】：

或者 Ajax 和数据字符串图像的可怕之处

【解决方案2】：

我来晚了，但你可以用 XMLHttpRequest 和一个 blob 来做到这一点。

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob'; //so you can access the response like a normal URL
xhr.onreadystatechange = function () {
    if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        var img = document.createElement('img');
        img.src = URL.createObjectURL(xhr.response); //create <img> with src set to the blob
        document.body.appendChild(img);
    }
};
xhr.open('GET', 'http://images.example.com/my_secure_image.png', true);
xhr.setRequestHeader('SecretPassword', 'password123');
xhr.send();

如果需要，您可以检查以确保 blob 的 MIME 类型是图像。

【讨论】：

谢谢！永远不会迟到:)
@robbie0630 成功了
@Paulo 我没有复制那个答案。此外，该解决方案使用字符串和 btoa 进行破解（并且可能会因某些字符编码而中断），而我的解决方案则使用 blob 干净地完成了它。随意使用您认为合适的答案。
@Apeiron 您可以使用Cache API 和Response 使用Fetch API 检索的对象。您可能需要考虑 using a service worker 将缓存透明地应用于您的应用程序。 HTH
值得注意的是 URL.revokeObjectURL() 可能也想使用它

【解决方案3】：

另一种方法是使用 cookie 代替标头参数。

例如，如果您想发送用户凭据来控制对图像的访问，则可以将此凭据设置为 cookie，并且可以在服务器端验证此 cookie。

【讨论】：

但是，根据我的试验，此方法不会从设置 document.cookie 的页面发送图像请求的 cookie 值。它将为将来的请求这样做。如果您观察到的不是这种情况，请告知。
好答案。设置 cookie 后，@PunitS 图像在新请求中加载。

【解决方案4】：

尝试（打开控制台>网络>名称：200.jpg> RequestHeaders>你好：世界！）

&lt;img src onerror="fetch('https://picsum.photos/200',{headers: {hello:'World!'}}).then(r=&gt;r.blob()).then(d=&gt; this.src=window.URL.createObjectURL(d));" /&gt;

【讨论】：

这很聪明。

【解决方案5】：

这可以使用service worker 来完成。在您的服务工作者中，处理 fetch 事件，并更改请求的模式和标头：

self.addEventListener('fetch', function(event) {
    const newRequest = new Request(event.request, {
        headers: {"Authorization": "Bearer XXX-my-token"},
        mode: "cors"
    });
    return fetch(newRequest);
}

从no-cors 到cors 是important to change the mode，否则标头会被默默丢弃。

【讨论】：