问题
I've been following this tutorial for enabling Azure CDN for Cloud Services: link. And I integrated my bundling and minification with CDN and everything works fine except my site cannot fetch fonts, I'm getting this error:
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.
I tired to find solution from my problem and added these lines to my Web.config file:
<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>
But that didn't help, also I found questions & answers such as this: link, but this helps only if you're using CDN + Blob storage (which I'm not using)
How can I solve this ?
EDIT
I removed fonts from my bundle and linked them without CDN and that did the trick, but that isn't exactly solution to this problem
回答1:
This rewrite configuration for Azure CDN is working for me...
<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>
For every request from Azure CDN (url starting with cdn/
) containing non empty Origin:
http header it adds Access-Control-Allow-Origin: *
http header to response.
回答2:
Answering this in case it helps other people looking for a solution. In Azure CDN, you can set rules on the Verizon Premium profile to enable CORS as well.
https://azure.microsoft.com/en-us/documentation/articles/cdn-cors/
This will also allow you to specify an explicit list of domains allowed access instead of just a wildcard.
回答3:
I had the same issue when creating an Azure CDN with my Azure web app as the origin.
In the end I used a similar workaround to you.
I replaced the src attribute of my @font-face declarations to use the google fonts cdn. Not always an option for everyone but it worked for me.
@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;
}
Check out all the fonts google have available here: https://fonts.google.com/
Hope this helps someone!
来源:https://stackoverflow.com/questions/29140790/azure-cloud-service-cdn-font-cors-error