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

【问题标题】：SVG files with wrong content type in CloudFrontCloudFront 中内容类型错误的 SVG 文件
【发布时间】：2019-08-13 17:03:26
【问题描述】：

我们有一个包含一些 .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==

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

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

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

有人知道这里发生了什么吗？看起来不像是 CloudFront 缓存的东西。为什么gzip 标头会这样影响它，还有什么办法可以解决这个问题？

【问题讨论】：

标签： svg amazon-s3 amazon-cloudfront content-type

【解决方案1】：

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

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

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

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

【讨论】：