假设我有这样的代码：
<img src='images/whatever.jpj' width='' height=''/>
如何为此请求配置自定义标头？
将不胜感激任何帮助。
为 <img/> 标签发出的请求设置自定义标头
IT技术
javascript
html
2021-02-26 04:16:05
5个回答
我来晚了，但你可以用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 类型是图像。
您无法更改浏览器对<img>标签加载的资源的 HTTP 请求。无论您尝试做什么，您都需要找到替代方法。
例如，您可以通过自己的服务器代理请求并修改那里的标头。或者您可以使用查询字符串参数化资源的 URL。
正如亚历克斯指出的那样，您也可以使用XmlHTTPRequest对象来加载图像数据并使用该setRequestHeader功能，尽管我怀疑您可以设置的标头有限（我怀疑您是否可以欺骗引用者或用户代理，例如，虽然我还没有测试过）。
试试（打开控制台>网络>名称：200.jpg>RequestHeaders>你好：世界！）
<img src onerror="fetch('https://picsum.photos/200',{headers: {hello:'World!'}}).then(r=>r.blob()).then(d=> this.src=window.URL.createObjectURL(d));" />一种替代方法是使用 cookie 而不是 header 参数。
例如，如果您想发送用户凭据来控制对图像的访问，则可以将此凭据设置为 cookie，并且可以在服务器端验证此 cookie。
这可以使用service worker来完成。在您的 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，否则头将悄悄丢弃。