Azure Cloud Service CDN字體CORS錯誤

Question

我一直在關注本教程中啟用Azure CDN for Cloud Services： 鏈接 。 我將我的捆綁和縮小與CDN集成，一切正常，除了我的網站無法獲取字體，我收到此錯誤：

Font from origin 'http://azurecdn.vo.msecnd.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:// mysite.com' is therefore not allowed access.

我厭倦了從我的問題中找到解決方案並將這些行添加到我的Web.config文件中：

  <httpProtocol>
  <customHeaders>
    <add name="access-control-allow-origin" value="*" />
    <add name="access-control-allow-headers" value="content-type" />
  </customHeaders>
</httpProtocol>
   <rewrite>
  <outboundRules>
    <rule name="Set Access-Control-Allow-Origin header">
      <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern="(.*)" />
      <action type="Rewrite" value="*" />
    </rule>
  </outboundRules>
  <rules>

    <rule name="RewriteIncomingCdnRequest" stopProcessing="true">
      <match url="^cdn/(.*)$"/>
      <action type="Rewrite" url="{R:1}"/>
    </rule>
  </rules>
</rewrite>

但這沒有幫助，我也找到了這樣的問題和答案： 鏈接 ，但這只有在你使用CDN + Blob存儲（我沒有使用）的情況下才有幫助

我怎么解決這個問題？

編輯

我從我的軟件包中刪除了字體，並將它們連接起來沒有CDN，這就是訣竅，但這並不能解決這個問題

Answer 1

Azure CDN的這種重寫配置對我有用......

<rewrite>
    <outboundRules>
        <rule name="Set Access Control Allow Origin Header" preCondition="Origin header">
            <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern="(.*)" />
            <action type="Rewrite" value="*" />
        </rule>
        <preConditions>
            <preCondition name="Origin header" logicalGrouping="MatchAll">
                <add input="{HTTP_ORIGIN}" pattern="(.+)" />
                <add input="{HTTP_X_ORIGINAL_URL}" pattern="^/cdn/(.*)$" />
            </preCondition>
        </preConditions>
    </outboundRules>
    <rules>
        <rule name="Rewrite CDN requests" stopProcessing="true">
            <match url="^cdn/(.*)$" />
            <action type="Rewrite" url="{R:1}" />
        </rule>
    </rules>
</rewrite>

對於來自Azure CDN（以cdn/開頭的url）的每個請求，包含非空的Origin: http標頭，它將Access-Control-Allow-Origin: * http標頭添加到響應中。

Answer 2

回答這個問題，以防其他人尋求解決方案。 在Azure CDN中，您可以在Verizon Premium配置文件上設置規則以啟用CORS。

https://azure.microsoft.com/en-us/documentation/articles/cdn-cors/

這還允許您指定允許訪問的域的顯式列表，而不僅僅是通配符。

Answer 3

在使用我的Azure Web應用程序作為源創建Azure CDN時，我遇到了同樣的問題。

最后，我使用了類似的解決方法。

我替換了@ font-face聲明的src屬性來使用google fonts cdn。 對每個人來說並不總是一個選擇，但它對我有用。

 @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; } 

查看Google提供的所有字體： https ： //fonts.google.com/

希望這有助於某人！