CAUTION: provisional headers are shown (font)

• @font-face의 Firefox 크로스 도메인(Cross-Domain)문제와 Apache
• WOFF File Format 1.0
• “CAUTION: provisional headers are shown” in Chrome debugger
• 크롬에서 “CAUTION: Provisional headers are shown” 문제가 발생했을 때 해결 방법
• [Chrome DevTools] "Provisional headers are shown"가 표시되는 원인과 대책 2,250

WOFF 포맷 자체가 '동일 출처 제한(same-origin restriction)'을 강제한다.
글꼴 출처가 되는 웹 사이트에서 HTTP 헤더 값 'Access-Control-Allow-Origin'을 제공하면, 다른 곳에서 WOFF 파일이 사용될 수 있다.

httpd.conf 수정

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff
<FilesMatch "\.(ttf|woff|eot)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

# CORS-enabled images & webfonts / Access-Control-Allow-Origin 관련 패치
<IfModule headers_module>
  <IfModule setenvif_module>
    <FilesMatch "\.(gif|png|jpe?g|svgz?|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff2?|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
  Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

그래도 이상하다면 [Chrome DevTools] "Provisional headers are shown"가 표시되는 원인과 대책 2,250 에서 확인 한 방법으로 크롬에서 Disable cache를 실행한 뒤 다시 사용하면 동작할 겝니다.