Ошибка CORS шрифта CDN облачной службы Azure

Я следую этому руководству по включению Azure CDN для облачных служб: ссылка. И я интегрировал свою связку и минимизацию с 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, и это помогло, но это не совсем решение этой проблемы.


person hyperN    schedule 19.03.2015    source источник


Ответы (3)


Эта переписанная конфигурация для 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 (URL-адрес, начинающийся с cdn/), содержащего непустой заголовок http Origin:, в ответ добавляется заголовок http Access-Control-Allow-Origin: *.

person Tomas Dolezal    schedule 17.04.2015

Отвечая на это, если это поможет другим людям найти решение. В Azure CDN вы можете установить правила для профиля Verizon Premium, чтобы также включить CORS.

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

Это также позволит вам указать явный список доменов, которым разрешен доступ, а не просто подстановочный знак.

person Richard Li - MSFT    schedule 06.10.2016
comment
Из Справочного центра: ссылки на внешние ресурсы приветствуются, но, пожалуйста, добавьте контекст вокруг ссылки, чтобы ваши коллеги-пользователи иметь некоторое представление о том, что это такое и почему оно там. Всегда цитируйте наиболее релевантную часть важной ссылки на случай, если целевой сайт недоступен или навсегда отключится. - person Adam; 07.10.2016

У меня была такая же проблема при создании Azure CDN с моим веб-приложением Azure в качестве источника.

В конце концов, я использовал аналогичный вам обходной путь.

Я заменил атрибут src моих объявлений @font-face, чтобы использовать cdn шрифтов Google. Не всегда вариант для всех, но это сработало для меня.

@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/.

Надеюсь, это поможет кому-то!

person Cossens    schedule 20.09.2016