저는 Azure, CORS 및 WOFF hell에 있습니다

Question

저는 Azure 웹 사이트에서 WordPress 사이트를 운영하고 있는데 Azure CDN 설치를 시도하고 있습니다. 엔드 포인트와 스토리지를 구성했습니다. 모든 파일이 업로드되었습니다.

내 문제는 WOFF 및 TTF 파일입니다. Chrome에서 200 OK 상태를보고하지만 파일 크기는 0KB입니다. Firebug의 Console은 CORS 문제를 나타냅니다. 이 글꼴이 사용되는 블록 아이콘을 얻는 중 글꼴이 제대로 작동하지 않습니다.

나는 Azure CORS 규칙을 설정했습니다. 여기에 스냅 샷 ...

Allowed origins: http://fonts.gstatic.com, http://cdn.devsoftsolutions.com 
Allowed methods: Get, Head, Put 
Allowed headers: x-ms-* 
Exposed headers: x-ms-* 
Max age (seconds): 200 

가 여기 내 Web.config의 설정을의 ...

<staticContent> 
     <remove fileExtension="svg" /> 
     <remove fileExtension="eot" /> 
     <remove fileExtension="woff" /> 
     <remove fileExtension="ttf" /> 
     <remove fileExtension=".svg" /> 
     <remove fileExtension=".eot" /> 
     <remove fileExtension=".woff" /> 
     <remove fileExtension=".ttf" /> 
     <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> 
     <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> 
     <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> 
     <mimeMap fileExtension=".woff" mimeType="application/x-woff" /> 
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" /> 
     <mimeMap fileExtension=".ttf" mimeType="application/font-ttf" /> 
     <mimeMap fileExtension=".ttf" mimeType="application/vnd.ms-fontobject" /> 
</staticContent> 

내가이 작업 얻으려고이 사이트는 http://dev.devsoftsolutions.com

Answer 1

입니다 내가 궁금해입니다 확장 당 하나 이상의 mimeMap을 정의 할 때 WOFF와 TTF가 작동 할 것으로 기대하십니까? IIS가 어떻게 처리 할 것으로 예상합니까?! 확장 당 정확히 하나의 MIME 맵만 정의해야합니다 (IIS는 마지막 정의했습니다!). 올바른 구성은 다음과 같습니다.

<staticContent> 
    <remove fileExtension="svg" /> 
    <remove fileExtension="eot" /> 
    <remove fileExtension="woff" /> 
    <remove fileExtension="ttf" /> 
    <remove fileExtension=".svg" /> 
    <remove fileExtension=".eot" /> 
    <remove fileExtension=".woff" /> 
    <remove fileExtension=".ttf" /> 
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" /> 
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> 
    <mimeMap fileExtension=".woff" mimeType="application/font-woff" /> 
    <mimeMap fileExtension=".ttf" mimeType="application/vnd.ms-fontobject" /> 
</staticContent> 

그리고 언제든지 IANA on which are the correct mime types과 상담 할 수 있습니다. this demo site에 WOFF 파일에서 서류 가방 아이콘을 볼 수 있습니다. 브라우저 디버깅 도구 또는 Fiddler를 사용하여 WOFF가 브라우저에 의해 올바르게 전송되고 해석되는지 확인할 수 있습니다.

아, 또 다른 메모 - Google의 글꼴에 CORS를 사용할 필요가 없습니다! CORS는 JavaScript를 사용하여 데이터를 보내거나 AJAX 호출을 할 때만 필요합니다! Google 글꼴은 CORS가 필요없는 간단한 스크립트 src 및 CSS @url()을 사용하여 사이트에 제공됩니다.