Question

我试图从CloudFront加载页面，并且svg显示为丢失的图像。

当我查看响应头时，我看到当我直接加载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时，标题丢失了：

$ 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剥离标头的原因，以及如何修复它？

谢谢！

Answer 1

好吧，看起来我搞砸了。将svg图像上传到S3时，我不得不将内容类型字符串添加到S3对象元数据中：

{{1}}

（没有空格）

在上传后添加此图片时，图片已正确投放。

S3默认情况下不发送内容类型标头，因此我的浏览器可能以不正确的格式解释了svg。通过指定标题，它知道如何处理它

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

1 个答案: