나는 어쨌든 found a solution to the very vexing problem with Firefox and CDN-hosted fonts access을 가지고 있다고 생각했지만 여기 IE9가 있습니다.IE9 리디렉션 캐싱, 글꼴 및 CORS (Cross Domain Resource sharing) CDN HTTP 헤더
최근에 IE9 캐싱 문제로 인해 매우 실망한 문제가 발견되어 실제 문제에 대해 더 많은 것을 밝혀주는 blog post (IE9 Redirect Caching Nightmare)에 대해 의견을 나눴습니다.
위의 내용이 실제로 문제인지는 확실치 않지만 충분히 가깝다는 것을 인정해야합니다.
문제 :
나는이 개 도메인 (기본 도메인 및 하위 도메인), 동일한 서버를 가리키는 호스팅 CDN에서 자원의 동일한 세트를 사용하는 동일한 웹 사이트를 제공하여 설정 웹 사이트가 Cloudfront에서 제공하는 Amazon S3에서 내가 처음 URL 중 하나를로드 할 때
CSS3117: @font-face failed cross-origin request. Resource access is restricted.
이 발생 : @ font-face를 사용하여 내 CSS 파일에서 글꼴을로드 할 때
https://example.com
https://www.example.com
나는 나의 IE9 개발자 도구 콘솔에서 오류 메시지의이 종류를 얻을 , 그 다음 다른 쪽을 구경해라. IE9는 이 아니며은 Compatibility Mode입니다. 실행은 Document Mode: IE9 Standards입니다.
CORS에 대한 제한된 이해와 Access-Control-Allow-Origin HTTP 헤더를 설정해야 할 필요가 있으므로 S3 CORS 정책에 충실히 설정했으며 Firefox와 완벽하게 작동합니다.
두 도메인의 요청은 CDN 리소스를 요청할 때 각각의 헤더를 갖게됩니다.
IE9가 캐싱으로 일부 최적화를 시도하고 리디렉션도 캐싱 된 것으로 보입니다. Access-Control-Allow-Origin 헤더가 캐시되기 때문에 문제가 발생합니다. CDN 서버에 요청을 보내지 않으면 Access-Control-Allow-Origin 헤더를 다른 도메인으로 변경할 수 없습니다.
그래서 요청이 https://www.example.com이고 아직 Access-Control-Allow-Origin이 https://example.com 인 상황이 남았습니다. 이로 인해 위의 오류 메시지와 관련된 제한된 리소스 문제가 발생합니다.
추가 모양 : 위의 상황이 실제로 발생하지만 Firefox 9와 함께 확인했지만 IE9와 동일한 엄격한 제한이 없습니다. 정보를 요청하는 하위 도메인 (https://www.example.com)은 주 도메인 (https://example.com)의 access-control-allow-origin을 허용합니다. Chrome (Webkit)은 상관하지 않습니다. 나는 브라우저의 행동 구현이 옳은지를 놓치고있다.
현재 CDN의 설정으로 Chrome과 Firefox처럼 기본 도메인에 대한 모든 www 하위 도메인 요청이 자동으로 재 라우팅됩니다. 검색 주소창에 www 하위 도메인을 여러 번 입력해야만 Chrome과 Firefox가 준수하게됩니다. 반면에 IE9는 주소 표시 줄에 입력 된 주소로 이동합니다. IE9는 여기 이상한 것 같지만 브라우저의 동작이 실제로 맞는지 잘 모르겠습니다.
유용성의 관점에서 볼 때 Chrome과 Firefox는 "올바른"동작으로 보입니다.
알려진 가능한 해결책은 :
- 에 다른
- 를 사용하여 쿼리 문자열에 브라우저에서
- 리디렉션 하나 개의 도메인을 캐싱을 해제 즉
* - 모두 허용하는
Access-Control-Allow-Origin헤더를 설정 리소스에 대한 다른 도메인 호출을 차별화하십시오. - 글꼴을 CSS에 데이터 uri로 삽입하십시오.
솔루션 1의 경우, 나는 단지 특정 도메인을 허용하도록 설정하는 편집증이라고 가정 해 봅시다.
솔루션 2의 경우 브라우저 모두 브라우저로 설정하면 최적이 아닙니다. 내 사이트는 일반적으로 덜 바람직한 다운로드 속도로 모바일 장치에서 실행되어야합니다.
해결책 3의 경우 가능하지만 IE9 캐싱 문제를 직접 해결할 수있는 솔루션이 궁금합니다.
솔루션 4의 경우 리소스가 @font-face에서 호출 될 때 특히 구현하기가 어렵습니다. 이 문제를 우회하기 위해 글꼴을로드하기 만하면 다른 줄에 대한 다른 도메인 호출에 대해 CSS를 동적으로 다시 생성해야한다는 의미입니까? CSS 자체의 목적을 무력화시키고 그 문제에 대한 리소스를 캐싱하는 것으로 보입니다.
편집 : 스타일 시트가 작동하지만 글꼴 로딩이 작동하지 않습니다.
해결 방법 5의 경우 특히 글꼴 파일이 주기적으로 변경되는 경우 유지 관리 및 업데이트가 지루합니다.
질문 :이 특별한 경우에 IE9의 리디렉션 캐싱 동작을 특별히 다룰 수있는 방법이 있습니까?
답변 및 의견을 보내 주시면 대단히 감사하겠습니다. 미리 감사드립니다!
편집 : 더 많은 브라우저 테스트 정보.
답변을 주셔서 감사합니다. 다른 질문에 대한 링크를 통해 문제를보다 자세히 조사 할 수있었습니다. 솔루션 1은 이미 CDN에 구현되어 있습니다. IE9에서 문제가 발생했습니다. 이상한 것 같습니다. 내 질문에 더 많은 정보를 추가했습니다. 솔루션 4, PHP는 사용하지 않지만 구현 원칙을 이해합니다. 또한 웹 사이트 특히 모바일 클라이언트에서 페이지를 빠르게로드 할 수 있도록 리소스를 캐시하는 브라우저가 필요합니다. 동적으로 생성 된 스타일 시트가 캐싱되는지 여부를 알고 있습니까? 그것은 헤더 우회 우회 우회? – VKen
IIS를 사용하고 있습니까? –
아니요, 질문에 언급 된대로 Amazon 웹 서비스를 사용합니다. – VKen