nginx가 @ font-face 형식을 지원하고 access-control-allow-origin을 허용하도록하려면 어떻게해야합니까?


21

이 규칙을 mime.types다음에 추가했습니다 .

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

이제 Content-Type 헤더가 각각에 맞게 설정되었습니다. 내 유일한 문제는 Firefox에 Access-Control-Allow-Origin이 필요하다는 것입니다. 이 답변 을 googled 하고 내 서버 지시문에 추가했습니다.

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

하지만 이제 내 글꼴이 전혀 제공되지 않습니다.

대신 error.log로컬 파일 시스템에서 열려고한다고보고합니다.

2010/10/02 22:20:21 [오류] 1641 # 0 : * 15 open () "/usr/local/nginx/html/fonts/mgopenmodernabold-webfont.woff"실패 (2 : 해당 파일 또는 디렉토리가 없음) , 클라이언트 : 69.164.216.142, 서버 : static.arounds.org, 요청 : "HEAD /fonts/mgopenmodernabold-webfont.woff HTTP / 1.1", 호스트 : "static.arounds.org"

어떤 아이디어가 구문에서 벗어날 수 있습니까? 로컬에서 규칙을 열지 말아야한다는 규칙을 명시 적으로 추가해야합니까?

편집 : 문제는 내가 지금 2 개의 다른 위치에 봉사하고 있다는 것입니다. 그리고 그 대신에 메인 내부에서 정규식 검사를 수행 한 다음 헤더를 공급해야합니다.


당신은 또한 당신의 규칙에 "otf"를 추가 할 수 있습니다
Kevin Campion

답변:


18

우와! 내 편집에서 생각했던 것과 거의 비슷했습니다. location {}대체로 파일 을 만드는 대신 기본적으로 정규식 파일 이름 검사를 수행해야했습니다 .

    location / { 
            root /www/site.org/public/;
            index index.html;

            if ($request_filename ~* ^.*?/([^/]*?)$)
            {
                set $filename $1; 
            }

            if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
                add_header Access-Control-Allow-Origin *;
            }
    }

8
아뇨 컨텍스트 상속에 대해 배우기 만하면됩니다. 서버 블록에 사이트 루트 지시문을 지정하면 모든 위치 블록에서 사이트 루트 지시문을 사용할 수 있습니다. 나는 당신이 이것을 읽는 것이 좋습니다 : blog.martinfjordvald.com/2010/07/nginx-primer
Martin Fjordvald

누군가가 실제로 #nginx 채널에서 저에게 언급했지만 답변을 업데이트하는 것을 잊었습니다.
meder omuraliev


5

모든 자산

이렇게하면 모든 자산이 제대로 작동합니다. root새 위치를 정의하려는 경우 추가 할 수 있습니다

location ~ \.(js|css|png|jpg|jpeg|gif|ico|html|woff|woff2|ttf|svg|eot|otf)$ {
    add_header "Access-Control-Allow-Origin" "*";
    expires 1M;
    access_log off;
    add_header Cache-Control "public";
}

1
그러나 이것은 모든 것을 깨뜨렸다
AlxVallejo

3

다른 해결책 : 예를 들어, 모든 글꼴을 넣고 static/fonts추가하십시오.

location /static/fonts  {
    add_header "Access-Control-Allow-Origin" *;
    alias /var/www/mysite/static/fonts;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.