在Azure CDN中提供托管字体时出现CORS错误

Question

We are trying to CDN enable our WebSite using Azure CDN endpoints.

For CSS and JavaScript resources and images, it works just fine. But for some reason we get CORS errors for our fonts.

The error is:

Access to Font at ' http://[name].azureedge.net/-/design/[long-path]/icons.woff ' from origin ' http://[URL-to-testsite] ' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://[URL-to-testsite] ' is therefore not allowed access.

We have tried to insert the following URL-rewrite rules in our web.config :

<rewrite>
  <outboundRules>
    <rule name="Set Access-Control-Allow-Origin header">
      <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern="(.*)" />
      <action type="Rewrite" value="*" />
    </rule>
  </outboundRules>
</rewrite>

…but unfortunately it did not change anything at all.

Any suggestions?

Answer 1

It worked to add the following HttpHeader in the Handler that returns fonts:

Response.AppendHeader("Access-Control-Allow-Origin", siteName);

If anyone has a better/prettier solution I am all ears.