본문 바로가기
Web/자잘한거

웹폰트 - 크로스도메인 문제해결

by juein 2018. 4. 30.

모든 도메인에서 웹 글꼴에 액세스 할 수 있는 작업


https://httpd.apache.org/docs/2.2/ko/sections.html



  
    Header set Access-Control-Allow-Origin "*"
  



글꼴 - 굉장한 자산에 액세스하는이 문제는 포괄적 인 설명과 문제 해결없이 많은 사람들에게 문제가되었습니다.


CORS 란 무엇입니까?


Cross-Origin Resource Sharing (CORS)은 추가 HTTP 헤더를 사용하여 사용자 에이전트가 현재 사용중인 사이트와 다른 원산지 (도메인)의 서버에서 선택된 리소스에 액세스 할 수있는 권한을 얻을 수있게하는 메커니즘입니다. 사용자 에이전트는 현재 문서의 출처가 아닌 다른 도메인, 프로토콜 또는 포트에서 자원을 요청할 때 원본 HTTP 요청을 만듭니다.


https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS


@font-face{
    font-family:'FontAwesome';
    src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
    src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'),
    url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
    font-weight:normal;
    font-style:normal
} 


글꼴은 스타일 시트 (CSS)를 통해로드됩니다. 우리가 여기에있는 상황은 다음과 같습니다




https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS


해결책:

S3의 파일 저장 장치에 CORS 규칙이 만들어졌고 문제의 도메인에 리소스에 대한 액세스 권한이 부여 된 경우 CDN이 CSS에 지정된 글꼴을로드하려고하면이 글꼴을로드 할 때 지정된 원본 / 도메인이로드됩니다 CDN은 있지만 CORS 액세스는 CDN 도메인에 제공되지 않습니다.


CDN 도메인에 대한 CORS 규칙을 만듭니다.

댓글