웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
특정 웹폰트를 s3의 스태틱 저장소에 올려두고 @font-face를 사용하여 불러올 수 있습니다. 아래처럼 말이죠.
로컬 웹 환경에서 불러올 때는 아무 이상 없이 잘 가져왔는데 S3에서 불러오니 CORS(Cross origin resource sharing) 에러가 발생하였습니다. 원인과 해결 방법을 알아봅니다.
참조 Origin이 달라 발생하는 에러로 스크립트로 외부 리소스를 불러올 때 발생하는 합니다. 이와 같이 스크립트가 css에서 접근하여 외부 폰트를 불러오는 경우에도 역시 CORS 에러가 발생할 수 있습니다.
해결 방법은 S3의 권한 탭에서 접근할 수 있도록 설정하는 방법입니다. S3의 버킷으로 이동하면 객체, 속성 탭 다음에 권한 탭이 존재합니다. 이 메뉴를 클릭 후 하단에 보면 CORS를 설정할 수 있는데 여기에 AllowedOrigins: [] 블록을 볼 수 있습니다.
@ 변경 전
만약 모두 허용하기 위해서 '*' 와일드카드를 추가한 경우 아래와 같이 변경될 것 입니다. (참고로 여기서는 * 기호를 사용했지만 호스트 주소가 확실하다면 해당 호스트만 적어 보안상 안전하게 유지하는 것이 좋습니다.)
@ 변경 후
허용할 호스트의 도메인을 입력하거나 *(와일드카드)를 사용하여 변경하면 됩니다.
수정이 완료되었다면 다시 웹페이지를 불러와 CORS 에러를 확인합니다. 이슈가 해결되었다면 더 이상 에러가 발생하지 않게됩니다.
여기까지 s3에서 불러온 폰트 파일에 cors 에러가 발생한 경우 해결 방법을 알아보았습니다
@font-face {
font-family: 'myFont';
url('s3 저장소 url')
}
}
font-family: 'myFont';
url('s3 저장소 url')
}
}
로컬 웹 환경에서 불러올 때는 아무 이상 없이 잘 가져왔는데 S3에서 불러오니 CORS(Cross origin resource sharing) 에러가 발생하였습니다. 원인과 해결 방법을 알아봅니다.
# CORS 에러의 원인은?
참조 Origin이 달라 발생하는 에러로 스크립트로 외부 리소스를 불러올 때 발생하는 합니다. 이와 같이 스크립트가 css에서 접근하여 외부 폰트를 불러오는 경우에도 역시 CORS 에러가 발생할 수 있습니다.
! cors 이슈 해결하기
해결 방법은 S3의 권한 탭에서 접근할 수 있도록 설정하는 방법입니다. S3의 버킷으로 이동하면 객체, 속성 탭 다음에 권한 탭이 존재합니다. 이 메뉴를 클릭 후 하단에 보면 CORS를 설정할 수 있는데 여기에 AllowedOrigins: [] 블록을 볼 수 있습니다.
@ 변경 전
[
'AllowedOrigins': [],
...
]
'AllowedOrigins': [],
...
]
만약 모두 허용하기 위해서 '*' 와일드카드를 추가한 경우 아래와 같이 변경될 것 입니다. (참고로 여기서는 * 기호를 사용했지만 호스트 주소가 확실하다면 해당 호스트만 적어 보안상 안전하게 유지하는 것이 좋습니다.)
@ 변경 후
[
'AllowedOrigins': [
'*'
],
...
]
'AllowedOrigins': [
'*'
],
...
]
허용할 호스트의 도메인을 입력하거나 *(와일드카드)를 사용하여 변경하면 됩니다.
수정이 완료되었다면 다시 웹페이지를 불러와 CORS 에러를 확인합니다. 이슈가 해결되었다면 더 이상 에러가 발생하지 않게됩니다.
여기까지 s3에서 불러온 폰트 파일에 cors 에러가 발생한 경우 해결 방법을 알아보았습니다
아래의 글도 찾고 계시지 않나요?
