Question

假设我有这样的代码：

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

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

非常感谢任何帮助

Answer 1

我迟到了，但你可以用<?php require ('simple_html_dom.php'); // Create DOM from URL or file $html = file_get_html('http://www.forgolf.cz/index.php/novinky.html'); $titles = []; $links = []; $img_src = []; $paragraph = []; foreach($html->find('h2 a') as $title) { $links[] = $title->getAttribute('href'); $titles[] = $title->innertext; } foreach($html->find('.item-inner p img') as $img) { $img_src[] = $img->getAttribute('src'); } foreach($links as $link) { // require('simple_html_dom.php'); $html = file_get_html('http://www.forgolf.cz' . $link); foreach($html->find('.item-page p') as $p) { if (is_string($p)) $paragraph[] = $p->innertext; } } ?>和blob来做到这一点。

XMLHttpRequest

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

尝试（打开控制台>网络>名称：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));" />

Answer 5

这可以使用 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 是 important to change the mode，否则标题将被静默丢弃。

为<img/>标记的请求设置自定义标头

5 个答案: