为什么 CloudFront 不为从 S3 提供的 svg 转发我的 Content-Type header？

Question

我正在尝试从 CloudFront 加载页面，但 svg 显示为缺失图像。

当我查看响应 headers 时，我发现当我直接加载 S3 存储桶时，响应包含正确的内容类型：image/svg+xml

$ curl -I https://s3-eu-west-1.amazonaws.com/pages.ivizone.com/1/19/1509969889/images/kenzo-logo-v2.svg
HTTP/1.1 200 OK
x-amz-id-2: k3+bRpJLp+avBaUWO4VSgB+Djxb+nebnGJs3u6kQ0rMeX95h3XeLHA03XYaWioat+JqNG6x61x8=
x-amz-request-id: 43D8ED0E9EB4490C
Date: Mon, 06 Nov 2017 15:06:13 GMT
Last-Modified: Mon, 06 Nov 2017 14:08:00 GMT
ETag: "4b8f9e399ec9bc166040a2641cf33fb3"
Accept-Ranges: bytes
Content-Type: image/svg+xml
Content-Length: 9484
Server: AmazonS3

然而，当我通过 CloudFront 时，header 丢失了：

$ curl -I https://pages.ivizone.com/1/19/1509969889/images/kenzo-logo-v2.svg
HTTP/1.1 200 OK
Content-Length: 9484
Connection: keep-alive
Date: Mon, 06 Nov 2017 14:01:01 GMT
Last-Modified: Mon, 06 Nov 2017 12:04:52 GMT
ETag: "4b8f9e399ec9bc166040a2641cf33fb3"
Server: AmazonS3
X-Cache: RefreshHit from cloudfront
Via: 1.1 ed9babcd75a95b818a6df1694ba95225.cloudfront.net (CloudFront)
X-Amz-Cf-Id: va4AIkAzw7-tNZ-qQo4KA_czM29tFQAzmNH_P0wjYd_TiboSBAyohA==

因此，这会导致我的图像出现问题。

有人知道为什么 Cloudfront 会剥离 header 以及如何修复它吗？

谢谢！

Answer 1

好的，看来我搞砸了什么地方。将 svg 图像上传到 S3 时，我必须将内容类型字符串添加到 S3 Object 元数据：

"image/svg+xml"

（无空格）

一旦我在上传时添加了这个，图片就可以正常提供了。

S3 默认不发送 content-type header，所以我的浏览器可能以不正确的格式解释了 svg。通过指定header，它知道如何处理它

为什么 CloudFront 不为从 S3 提供的 svg 转发我的 Content-Type header？

Why is CloudFront not forwarding my Content-Type header for an svg served from S3?

svg

amazon-s3

amazon-cloudfront