Amazon S3 CORS에서 Firefox의 도메인 간 글꼴 로드 문제를 어떻게 해결할 수 있습니까?

Amazon S3 CORS 및 Firefox 교차 도메인 글꼴 로드: 글꼴 로드 문제 해결

Firefox는 현재 웹페이지와 다른 출처에서 글꼴을 로드하는 데 문제가 발생하는 것으로 알려져 있습니다. , 특히 글꼴이 CDN에서 호스팅되는 경우. 이 문제는 인용된 포럼을 포함하여 온라인 포럼에서 널리 논의되었습니다.

이 문제를 해결하기 위해 Amazon S3 CORS(Cross-Origin Resource Sharing)는 잠재적인 솔루션을 제공합니다. CORS를 사용하면 서버가 다른 도메인에서 액세스할 수 있는 리소스를 지정할 수 있으므로 도메인 간 보안 제한이 완화됩니다.

S3용 CORS를 구성하려면 글꼴이 포함된 버킷에 XML 문서를 업로드해야 합니다. 다음 구성이 권장됩니다.

<?xml version="1.0" encoding="UTF-8"?>
<corsconfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <corsrule>
        <allowedorigin>https://mydomain.com</allowedorigin>
        <allowedmethod>GET</allowedmethod>
        <maxageseconds>3000</maxageseconds>
        <allowedheader>Content-*</allowedheader>
        <allowedheader>Host</allowedheader>
    </corsrule>
    <corsrule>
        <allowedorigin>https://*.mydomain.com</allowedorigin>
        <allowedmethod>GET</allowedmethod>
        <maxageseconds>3000</maxageseconds>
        <allowedheader>Content-*</allowedheader>
        <allowedheader>Host</allowedheader>
    </corsrule>
</corsconfiguration>

이 구성에서는 다음이 허용됩니다.

• 지정된 원본(mydomain.com)에서 GET 요청
• 지정된 원본의 하위 도메인
• CORS 헤더의 최대 수명을 3000으로 설정 초
• "Content-" 및 "Host"로 시작하는 요청 헤더를 허용합니다

그러나 Cloudfront의 Access-Control-Allow-Origin 헤더 캐싱으로 인해 일부 개발자는 도메인 간 글꼴 로딩과 관련된 문제가 보고되었습니다. 이 문제를 극복하기 위한 해결 방법은 쿼리 문자열을 사용하여 서로 다른 도메인의 호출을 구별하는 것입니다.

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

이 접근 방식을 사용하면 Cloudfront가 캐싱 문제를 우회하여 다양한 도메인에 고유한 응답을 제공할 수 있습니다.

결론적으로 쿼리 문자열 해결 방법과 함께 Amazon S3 CORS를 사용하면 Firefox의 도메인 간 글꼴 로딩 문제를 해결할 수 있습니다. 추가 지원이 필요한 경우 인용된 AWS 포럼 스레드를 참조하여 Amazon 전문가의 추가 통찰력과 설명을 참조하세요.

위 내용은 Amazon S3 CORS에서 Firefox의 도메인 간 글꼴 로드 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!