返回多個內容編碼值的服務器打破了Chrome中的SVG文件

通過使用asset-sync將資產上傳到Amazon S3的Rails應用程序設置，然後在Amazon上使用CloudFront和CloudFlare作爲CDN，我似乎在Chrome中出現錯誤第1欄第1行返回多個內容編碼值的服務器打破了Chrome中的SVG文件

錯誤：和Safari訪問時.svg文件：

此頁面包含以下錯誤編碼錯誤下面是頁至第一個錯誤渲染。

當檢查頭，它看起來像這樣：

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

因爲內容編碼指定了兩次，我認爲，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的gzip SVG文件並添加content-encoding根據自己的文檔：

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

如何正確我在我的Rails應用程序中使用SVG資產？

來源

2015-04-01 Cristian

沒有答案，但看看這個帖子http://www.cdnplanet.com/blog/gzip-nginx -cloudfront/ – Anatoly 2015-04-04 21:36:51

謝謝我看了一下，但是我不使用nginx來提供資源。它們存儲在亞馬遜上，並通過CloudFront，然後CloudFlare進行服務。我認爲CloudFlare是罪魁禍首，因爲在那之前它看起來不錯。如果我沒有找到任何其他解決方案，我會向他們發送支持憑單。 – Cristian 2015-04-05 08:03:09

雖然我看到CloudFlare使用nginx作爲服務器：'服務器：cloudflare-nginx'也許文章確實揭示了真正的問題... – Cristian 2015-04-05 08:04:33

此更新霧AWS寶石到最新版本後是固定的：

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

來源

2015-04-14 13:19:06 Cristian

返回多個內容編碼值的服務器打破了Chrome中的SVG文件

回答

相關問題