CloudFront 中内容类型错误的 SVG 文件

Question

我们有一个包含一些 .svg 文件的网站。它作为静态站点存储在带有 CloudFront 的 S3 存储桶中。当我们最初将文件上传到存储桶时，所有 .svg 文件都得到了错误的 Content-Type 属性，它们得到的是 binary/octet-stream 而不是 image/svg+xml。我看到很多人都遇到过这个问题。不管是什么原因，我们将它们转换回 image/svg+xml 但浏览器仍将它们下载为 binary/octet-stream.

一些注意事项：

当我们将浏览器指向默认的 s3 存储桶网站 (http://my-kule-site.s3-website-us-east-1.amazonaws.com) 时，所有 svg 文件都会以正确的内容类型出现。只有当我们通过 CloudFront 访问该站点时，我们才会遇到问题。
当我在没有指定任何 header 的情况下卷曲 svg 文件时，它返回正确的 Content-Type.

$ curl -i https://my-kule-site.com/img/whatup.svg
HTTP/2 200 
content-type: image/svg+xml
content-length: 3342
date: Tue, 13 Aug 2019 16:48:48 GMT
last-modified: Mon, 12 Aug 2019 14:39:35 GMT
x-amz-version-id: ZJRubnV_5a0U53bM1JHqLgdkklu.dsLA
etag: "1870f06100c651976bd353d0b620a810"
server: AmazonS3
x-cache: Miss from cloudfront
via: 1.1 64b0aa0bda8aeed651e25c63b33d01cb.cloudfront.net (CloudFront)
x-amz-cf-pop: DFW53-C1
x-amz-cf-id: UYKuqWq1DbSGzlhsWN08cCaFJi7-ZzhNIjNiIOR5Wqp4xJq4enWMCQ==

但是，当我使用 Chrome 将请求转换为 curl 时，我得到了错误 Content-Type:

curl -i 'https://my-kule-site.com/img/whatup.svg' \
-H 'pragma: no-cache' \
-H 'cookie: _ga=GA1.2.1895535225.1553806453; rxVisitor=1565278857790QSUIL3RKP345UQV1JFIPAGLOUE0QTANP; _gid=GA1.2.2146389308.1565619566' \
-H 'accept-encoding: gzip, deflate, br' \
-H 'accept-language: en-US,en;q=0.9,it;q=0.8,fr;q=0.7' \
-H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36' \
-H 'sec-fetch-mode: no-cors' \
-H 'accept: image/webp,image/apng,image/*,*/*;q=0.8' \
-H 'cache-control: no-cache' \
-H 'authority: my-kule-site.com' \
-H 'referer: https://my-kule-site.com/' \
-H 'sec-fetch-site: same-origin' --compressed

HTTP/2 200 
content-type: binary/octet-stream
content-length: 3342
date: Mon, 12 Aug 2019 14:19:31 GMT
last-modified: Tue, 06 Aug 2019 22:06:08 GMT
x-amz-version-id: 2yDH.ceFE2OMxBKqZ0hf1uJYIM0cz_0g
etag: "1870f06100c651976bd353d0b620a810"
server: AmazonS3
age: 3959
x-cache: Hit from cloudfront
via: 1.1 5bf69ea12932bf924b52d57ed5314c14.cloudfront.net (CloudFront)
x-amz-cf-pop: DFW53-C1
x-amz-cf-id: UOLzk1L_jwKnLM4YTwowHKUxSHYlpAOq9rGyr89xEYDhMhuBndT8Sg==

如果我像这样从 accept-encoding 中删除 gzip：

-H 'accept-encoding:, deflate, br'

然后返回 Content-Type: image/svg+xml。

有人知道这里发生了什么吗？看起来不像是 CloudFront 缓存的东西。为什么 gzip header 会像这样影响它，无论如何要解决这个问题？

Answer 1

请注意两个响应中 last-modified 和 x-amz-version-id 的不同值。

CloudFront 在某些情况下会缓存 object 的多个副本，以便根据收到的请求提供正确的副本。它忽略了许多不应导致响应变化的请求 headers，但在这种情况下，您看到的是基于 accept-encoding.

的变化

如果还有其他类似的 object，您需要为此 object 或整个分布 (/*) 执行 CloudFront 缓存失效。一旦失效完成，这应该不再是问题。

另请注意，CloudFront 会忽略请求中的 pragma 和 cache-control。它只在来自源的响应中尊重 cache-control，而不是来自浏览器的响应。

CloudFront 中内容类型错误的 SVG 文件

SVG files with wrong content type in CloudFront

svg

amazon-s3

amazon-cloudfront

content-type