为标记的请求设置自定义标头

Question

假设我有这样的代码：

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

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

将不胜感激任何帮助

Answer 1

您无法更改浏览器对<img>标记加载的资源的HTTP请求。无论你想做什么，你都需要找到另一种方法。

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

正如Alex指出的那样，您也可以使用XmlHTTPRequest对象来加载图像数据并使用setRequestHeader函数，但我怀疑您可以设置哪些标题（我怀疑您可以欺骗引用者或用户代理例如，虽然我没有测试过这个）。

Answer 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类型是图像。

Answer 3

一种替代方法是使用cookie而不是header参数。

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