服务器返回多个 content-encoding 值会破坏 Chrome 中的 SVG 文件

Question

使用 Rails 应用程序设置将资产上传到 Amazon S3，使用 asset-sync, then uses both CloudFront and CloudFlare 作为 Amazon 顶部的 CDN，我似乎在 Chrome 和 Safari 中访问一个错误.svg 文件：

This page contains the following errors:

error on line 1 at column 1: Encoding error Below is a rendering of the page up to the first error.

检查 header 时，它看起来像这样：

HTTP/1.1 200 OK
Date: Wed, 01 Apr 2015 11:12:44 GMT
Content-Type: image/svg+xml
Transfer-Encoding: chunked
Connection: keep-alive
Expires: Thu, 31 Mar 2016 17:12:44 GMT
Content-Encoding: 
Cache-Control: public, max-age=31557600
Last-Modified: Tue, 31 Mar 2015 10:06:39 GMT
ETag: W/"324051aadc1c103e0c5f293d30be07c4"
X-Cache: Miss from cloudfront
Via: 1.1 xxxxxxxxxxxxxxxxxx.cloudfront.net (CloudFront)
X-Amz-Cf-Id: emRD3y9BnVdqlIenZ5CnS5KISqcW3UcRhH8JQFfPnIuidZBtyyGSoA==
CF-Cache-Status: HIT
Vary: Accept-Encoding
Server: cloudflare-nginx
CF-RAY: 1d03dc53ac8816c4-ARN
Content-Encoding: gzip

因为 Content-Encoding 指定了两次，我认为 Chrome 无法正确解释文件。

响应看起来像垃圾：

��TM��8��Wp���iQ��)v
��(0�K/�kklc;�5I��/(;ٴ3(�:H���#E
޼?�{8�i��!�J�����&_����f[uُ���0���7������m��Z�5��E��u������
ta*n������\���|�t:�)�qj|����c�R��}7<�F�,�|�P�Gc�����5��\o�ո��?�b�`����G3����t�.j��6���x�o4��VI���l������ꍿ�K�6s�-&SZSé���7�]X��=��i��s��l�G<�i|t����։�����/A���ԛ\��ƺ�|g�&��Yum�M�K�/����i|:\���������x�a����q�����8x�xx~��+�ʹ�۩��q��������F善`E�~�{�����}��ߖ�����
����sY�my0KY/���J�B��O�J;-
3�@�"�0[����B�$EH��A��2$�|���Jj(�rb��`�v�� �)�q�!g%%�a�0x�*\���v��=^^q�7�8�M����=�k�/��_-0�2�$�"BKRkH0H%i� ��$���#�!q�R(Hc�J"�(@�p�����PP�Q�_a3�(YAA��`��5v `��c�;0�`��N!�"��(.=����0��7,O4D�|I>#���I���D�Q%2�(�"F/fb$�U"L��0�`�Oo�|
?8����o��/`�j

在 Firefox 中，文件加载且源看起来正常：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="24px" height="48px" viewBox="0 0 24 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
    <title>Artboard</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Artboard" sketch:type="MSArtboardGroup" fill="#FFFFFF">
            <g id="svg-sprite-communication-copy" sketch:type="MSLayerGroup" transform="translate(2.000000, 3.000000)">
                <g id="ic_email_24px" transform="translate(0.000000, 25.000000)" sketch:type="MSShapeGroup">
                    <path d="M18,0 L2,0 C0.9,0 0.01,0.9 0.01,2 L0,14 C0,15.1 0.9,16 2,16 L18,16 C19.1,16 20,15.1 20,14 L20,2 C20,0.9 19.1,0 18,0 L18,0 L18,0 Z M18,4 L10,9 L2,4 L2,2 L10,7 L18,2 L18,4 L18,4 Z" id="Shape"></path>
                </g>
                <g id="ic_call_24px" transform="translate(1.000000, 0.000000)" sketch:type="MSShapeGroup">
                    <path d="M3.62,7.79 C5.06,10.62 7.38,12.93 10.21,14.38 L12.41,12.18 C12.68,11.91 13.08,11.82 13.43,11.94 C14.55,12.31 15.76,12.51 17,12.51 C17.55,12.51 18,12.96 18,13.51 L18,17 C18,17.55 17.55,18 17,18 C7.61,18 0,10.39 0,1 C0,0.45 0.45,0 1,0 L4.5,0 C5.05,0 5.5,0.45 5.5,1 C5.5,2.25 5.7,3.45 6.07,4.57 C6.18,4.92 6.1,5.31 5.82,5.59 L3.62,7.79 L3.62,7.79 Z" id="Shape"></path>
                </g>
            </g>
        </g>
    </g>
</svg>

直接从亚马逊请求文件只会输出这个空的 content-encoding header 并且文件加载正常：

Content-Encoding:

从 CloudFront 请求它时也会发生同样的情况。似乎 CloudFlare gzip svg 文件并根据他们的文档添加 content-encoding：

https://support.cloudflare.com/hc/en-us/articles/200168086-Does-CloudFlare-gzip-resources-

如何在我的 Rails 应用程序中正确使用 SVG 资源？

Answer 1

将 fog-aws gem 更新到最新版本后已解决此问题：

-    fog-aws (0.1.1)
+    fog-aws (0.1.2)

服务器返回多个 content-encoding 值会破坏 Chrome 中的 SVG 文件

Server returning multiple content-encoding values breaks SVG file in Chrome

svg

gzip

ruby-on-rails

content-encoding

cloudflare