Javascript 为 <img/> 标签发出的请求设置自定义标头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27000152/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set custom header for the request made from <img/> tag
提问by andrey
Let's say I have a code like this:
假设我有这样的代码：
<img src='images/whatever.jpj' width='' height=''/>
How to configure custom headers for this request?
如何为此请求配置自定义标头？
Will appreciate any help.
将不胜感激任何帮助。
采纳答案by Drew Noakes
You cannot change the browser's HTTP request for resources loaded by the <img>tag. Whatever you are trying to do, you will need to find an alternative approach.
您无法更改浏览器对<img>标签加载的资源的 HTTP 请求。无论您尝试做什么，您都需要找到替代方法。
For example, you could proxy the request through your own server and modify the headers there. Or you could parametrise the URL of the resource with a query string.
例如，您可以通过自己的服务器代理请求并修改那里的标头。或者您可以使用查询字符串参数化资源的 URL。
As Alex points out, you may also be able to use an XmlHTTPRequestobject to load the image data and use the setRequestHeaderfunction, though I suspect you are limited in what headers you can set (I doubt you can spoof the referrer or user agent for example, though I haven't tested this).
正如亚历克斯指出的那样，您也可以使用XmlHTTPRequest对象来加载图像数据并使用该setRequestHeader功能，尽管我怀疑您可以设置的标头有限（我怀疑您是否可以欺骗引用者或用户代理，例如，虽然我没有测试过）。
回答by robbie
I'm late here, but you can do this with XMLHttpRequestand a blob.
我来晚了，但你可以用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();
If you want, you could check to make sure the blob's MIME type is an image.
如果需要，您可以检查以确保 blob 的 MIME 类型是图像。
回答by Pedro Leite
One alternative is to use cookie instead of header parameter.
一种替代方法是使用 cookie 而不是 header 参数。
If you want, for example, send a user credential to control the access to the image, this credential can be set to a cookie and this cookie can be validated at server side.
例如，如果您想发送用户凭据来控制对图像的访问，则可以将此凭据设置为 cookie，并且可以在服务器端验证此 cookie。
回答by Kamil Kie?czewski
Try (open console>networks> name: 200.jpg> RequestHeaders> hello: World!)
试试（打开控制台>网络>名称：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));" />