Nginx 환경에서 웹폰트 확장자 CORS 이슈

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

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

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

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

#sudo vi /etc/nginx/sites-available/default
...
 
server {
    ...
 
    # Webfont CORS Issue fix.
    location ~* \.(eot|otf|ttf|woff|woff2)$ {
        add_header Access-Control-Allow-Origin *;
    }
 
    ...Copy

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