CORS 정책으로 인해 Chrome/FF 차단 CDN 글꼴을 방지하는 방법은 무엇입니까?

방금 (Wordpress) 사이트를 새 호스팅 위치로 마이그레이션했습니다.CORS 정책으로 인해 Chrome/FF 차단 CDN 글꼴을 방지하는 방법은 무엇입니까?

Chrome과 Firefox가 특정 글꼴을 표시하지 않는다는 점을 제외하면이 사이트는 완벽하게 작동합니다.

Access to Font at 'http://example.com/site/wp-content/themes/mytheme/fonts/modules.ttf' 
from origin 'http://example.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://example.com' is therefore not allowed access.

Cloudfront를 사용하여 글꼴을 제공합니다 (S3가 아닌 example.com을 사용하고 있습니다). Wordpress .htaccess에는 다음 내용이 포함되어 있습니다.

<IfModule mod_headers.c> 
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$"> 
    Header set Access-Control-Allow-Origin "*" 
</FilesMatch> 
</IfModule> 
<IfModule mod_mime.c> 

# Web fonts 
AddType application/font-woff woff 
AddType application/vnd.ms-fontobject eot 

AddType application/x-font-ttf ttc ttf 
AddType font/opentype otf 

AddType  image/svg+xml svg svgz 
AddEncoding gzip svgz 

</IfModule>

이 문제를 디버그/해결하기위한 합리적인 방법은 무엇입니까?

출처

2017-02-07 Andy Harvey

제가 이해하는 것처럼 .htaccess를 워드 프레스쪽에 넣었습니까? 그러나 글꼴이있는 "서버"쪽에 있어야합니다. CORS에 따르면 리소스 소유자 (글꼴)는 클라이언트 서버 (WordPress 사이트)에 대한 액세스 권한을 부여합니다. –

@KAGGDesign에게 감사드립니다. 저는 이것에 익숙하지 않고 잘 설명하지 못했습니다. Wordpress 사이트 *가 서버라고 이해합니다. CDN의 기원은 Wordpress 사이트입니다. 예를 들어 S3 버킷에 글꼴을 호스팅하는 경우 해당 버킷에 액세스 정책을 추가하는 것은 비교적 간단합니다. 그러나 WP 사이트가 시작된 이래로 나는 어떻게 구성해야하는지 명확하지 않습니다. –

또한 Safari는 문제없이 글꼴을로드합니다. –

많은 인터넷 검색 및 실험을 거친 후 새 서버에서 mod_headers 모듈을 활성화해야했습니다.

sudo a2enmod headers 
sudo service apache2 reload

미래에 누군가 다른 사람을 구하기 위해 여기에 게시하십시오.

출처

2017-02-07 09:27:29

CORS 정책으로 인해 Chrome/FF 차단 CDN 글꼴을 방지하는 방법은 무엇입니까?

답변

관련 문제