1

在 JavaScript 中，出于安全原因，在 CORS 请求期间Fetch API对某些标头的访问受到限制。

我们可以curl在终端中看到资源的实际标头：

curl -I https://i.imgur.com/z4d4kWk.jpg

结果如下：

HTTP/1.1 200 OK
Last-Modified: Thu, 02 Feb 2017 11:15:53 GMT
ETag: "18c50e1bbe972bdf9c7d9b8f6f019959"
x-amz-storage-class: STANDARD_IA
Content-Type: image/jpeg
cache-control: public, max-age=31536000
Content-Length: 146515
Accept-Ranges: bytes
Date: Sat, 14 Jul 2018 01:34:10 GMT
Age: 446795
Connection: keep-alive
X-Served-By: cache-iad2134-IAD, cache-syd18935-SYD
X-Cache: HIT, HIT
X-Cache-Hits: 1, 1
X-Timer: S1531532051.675972,VS0,VE2
Access-Control-Allow-Methods: GET, OPTIONS
Access-Control-Allow-Origin: *
Server: cat factory 1.0

这是使用的等效请求fetch：

await fetch("https://i.imgur.com/z4d4kWk.jpg", { method: 'HEAD' }).then(r => [...r.headers.entries()].map(l => l.join(": ")).join("\n"))

结果如下：

cache-control: public, max-age=31536000
content-type: image/jpeg
last-modified: Thu, 02 Feb 2017 11:15:53 GMT

但是 imgur 允许其他来源访问该资源（参见上面Access-Control-Allow-Origin: *的curl输出），因此我们实际上可以获取文件的内容：

await fetch("https://i.imgur.com/z4d4kWk.jpg").then(r => r.arrayBuffer())

CORS 响应

所以我们可以得到文件的实际内容，但我们不能得到标题？

起初我认为这是因为我们正在发出HEAD请求并且 imgur 指定了Access-Control-Allow-Methods: GET, OPTIONS，但我尝试使用GET请求并仍然得到相同的有限标头集：

await fetch("https://i.imgur.com/z4d4kWk.jpg").then(r => [...r.headers.entries()].map(l => l.join(": ")).join("\n"))

知道为什么即使我们可以完全访问内容本身，我们也无法看到标题？

4

0 回答 0