웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

@font-face로 aws s3 폰트 불러올 때 cors 에러 해결 방법

Last Modified : 2023-02-24 / Created : 2023-02-24
3,473
View Count
특정 웹폰트를 s3의 스태틱 저장소에 올려두고 @font-face를 사용하여 불러올 수 있습니다. 아래처럼 말이죠.
@font-face {
  font-family: 'myFont';
    url('s3 저장소 url')
  }
}

로컬 웹 환경에서 불러올 때는 아무 이상 없이 잘 가져왔는데 S3에서 불러오니 CORS(Cross origin resource sharing) 에러가 발생하였습니다. 원인과 해결 방법을 알아봅니다.



# CORS 에러의 원인은?


참조 Origin이 달라 발생하는 에러로 스크립트로 외부 리소스를 불러올 때 발생하는 합니다. 이와 같이 스크립트가 css에서 접근하여 외부 폰트를 불러오는 경우에도 역시 CORS 에러가 발생할 수 있습니다.


! cors 이슈 해결하기


해결 방법은 S3의 권한 탭에서 접근할 수 있도록 설정하는 방법입니다. S3의 버킷으로 이동하면 객체, 속성 탭 다음에 권한 탭이 존재합니다. 이 메뉴를 클릭 후 하단에 보면 CORS를 설정할 수 있는데 여기에 AllowedOrigins: [] 블록을 볼 수 있습니다.

@ 변경 전
[
   'AllowedOrigins': [],
   ... 
]

만약 모두 허용하기 위해서 '*' 와일드카드를 추가한 경우 아래와 같이 변경될 것 입니다. (참고로 여기서는 * 기호를 사용했지만 호스트 주소가 확실하다면 해당 호스트만 적어 보안상 안전하게 유지하는 것이 좋습니다.)

@ 변경 후
[
  'AllowedOrigins': [
    '*'
  ],
...
]

허용할 호스트의 도메인을 입력하거나 *(와일드카드)를 사용하여 변경하면 됩니다.

수정이 완료되었다면 다시 웹페이지를 불러와 CORS 에러를 확인합니다. 이슈가 해결되었다면 더 이상 에러가 발생하지 않게됩니다.


여기까지 s3에서 불러온 폰트 파일에 cors 에러가 발생한 경우 해결 방법을 알아보았습니다

Previous

시스템 리부팅시 pm2 스크립트 자동 실행 방법

Previous

ChatGPT와 마이크로 말하고 스피커로 듣는 방법 알아보기