Question

使用asset-sync将资产上传到Amazon S3的Rails应用程序设置，然后在亚马逊上使用CloudFront和CloudFlare作为CDN，我似乎在Chrome中出错访问.svg文件时访问Safari：

此页面包含以下错误：
     第1行第1行的
错误：编码错误下面是渲染   页面直到第一个错误。

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

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$�\9|���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>

直接从Amazon请求文件只输出这个空的内容编码标题，文件加载正常：

Content-Encoding:

从CloudFront请求时也是如此。似乎 CloudFlare gzips 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)

返回多个内容编码值的服务器会破坏Chrome中的SVG文件

1 个答案: