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

Question

我们有一个包含一些 .svg 文件的网站。它使用 CloudFront 作为静态站点存储在 S3 存储桶中。当我们最初将文件上传到存储桶时，所有 .svg 文件都出错了 Content-Type属性(property)，他们得到了 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 访问站点时，我们才会遇到问题。

当我在不指定任何标题的情况下 curl 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==

如果我删除 gzip来自 accept-encoding像这样:

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

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

有谁知道这里发生了什么？看起来不像 CloudFront 缓存。为什么会出现 gzip标题会像这样影响它，无论如何要解决这个问题？

Answer 1

注意 last-modified 的不同值和 x-amz-version-id关于这两个回答。

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

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

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