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 访问该网站时才会出现问题。

• 当我卷曲 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 会缓存对象的多个副本，以便可以根据收到的请求提供正确的副本。它忽略了许多不应导致响应变化的请求标头，但在这种情况下，您会看到基于accept-encoding.

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

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