CSS3117: @font-face failed cross-origin request. Resource access is restricted.
로컬 PC에 있는 HTML 파일에 웹에 있는 script 파일을 링크시키면 동작을 안 하는 경우가 있습니다. 그럴 때 개발자 도구의 콘솔(Console) 탭을 보면 다음과 같은 식으로 오류 정보가 나옵니다.
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
MathJax_Main-Regular.woff
Access to Font at 'http://.../HTML-CSS/TeX/woff/MathJax_Main-Regular.woff?rev=2.6.1' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
이유는, CORS 정책에 의해 웹에 있는 자원을 함부로 접근할 수 없도록 웹 브라우저 차원에서 제한을 걸었기 때문입니다. (물론, 여러분들이 임의로 만든 브라우저라면 이런 정책을 구현하지 않고 그냥 접근하게 만들 수도 있습니다.)
현재, 주요 웹 브라우저들은 모두 이런 정책을 가지고 있는데 이러한 접근 제한을 푸는 것은 서버 쪽에서 허락을 하는 방식으로 이뤄집니다. 그리고 IIS의 경우 web.config에 다음과 같이 추가해 주면 됩니다.
<system.webServer>
// ... 생략...
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
</system.webServer>
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]