eruLabo

Web Dev. erusya's Blog

새로 웹서버 세팅 후 웹 폰트 파일을 직접 서버에 올리고 url 로 가져다 쓰다보니 일부 폰트 확장자(otf, woff, woff2 등)에 대해 CORS 문제가 발생했습니다. 일반적으로 직접 구글 웹폰트 주소를 통해서 이용하면 이미 구글서버의 경우에는 아래 문제에 대해 CORS 문제가 일어나지 않도록 조치를 취해서 문제가 일어나지 않습니다.

개인 서버에서 세팅하다가 보면 일어나는 문제이긴 하죠.


서버에서 해당 폰트 확장자에 대해 CORS 문제를 일으키는 것인데, 이것은 제공 서버단에 설정을 추가해주면 되는 사항입니다.

본인은 Nginx 서버 환경에서 이용중이어서 Nginx 서버 설정파일로 가서 해당 확장자에 대해서 CORS 문제가 발생하지 않도록 설정값을 추가했다.



# Webfont CORS Issue fix.
location ~* \.(eot|otf|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}


조금 응용하면 특정 파일에 대해서 일어나는 CORS 문제에 대해서도 대응이 가능한 코드이긴 합니다.



Ref.1: Assets Pull: Configure CORS to Resolve Web Font Issues

222 Views | 0 Comment
Profile Image
erusya

안녕하세요, erusya 입니다.
현직 풀스택 개발자로 일하는 중이고 요즘은 기획업무도 경험을 쌓고있습니다.
방문해주셔서 고마워요!


Recently Comments

Visitors