0
내 응용 프로그램에서 사용하고있는 부트 스트랩 글리 phicon은 사파리에서만 작동하며 크롬이나 파이어 폭스에서는 작동하지 않습니다. glyphicons의 이미지는 아래와 같습니다. 글리 파이콘이 파이어 폭스와 크롬에서 작동하지 않습니다
답은 프로덕션 환경 호스트 이름을 허용 목록에 명시했습니다. 나는 "distribution", "distribution setting", "behavior"탭을 클릭하고 "Edit"를 클릭했다. "Forward Headers"를 "None (Caching) 없음"에서 "Whitelist"로 변경했습니다. "Whitelist Headers"섹션이 나타나고 "host"를 목록에 추가했습니다. 이 사이트가 호스트 이름을 "허용"할 수있는 유일한 장소였습니다. 이 일을 정확히했는지 확실하지 않습니다.
크롬에서는 여전히 작동하지 않았습니다. 나는 크롬이 문제인지를보기 위해 파이어 폭스를 사용했지만 파이어 폭스에서도 작동하지 않았다. 사파리에서만 작동합니다.
나는 또한 config.serve_static_files = true을 프로덕션 환경에 설정했습니다.
앞서 언급했듯이 이전에 유사한 질문을 게시했지만 해결책은 없습니다. 어떤 도움을 주시면 감사하겠습니다. 감사!
크롬 콘솔을 본 후 다음 오류가 발생합니다.
https://d24b01zeuxnthb.cloudfront.net/assets/bootstrap/glyphicons-halflings…gular-bd18efd3efd70fec8ad09611a20cdbf99440b2c1d40085c29be036f891d65358.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
https://d24b01zeuxnthb.cloudfront.net/assets/sprites/[email protected]29b3010a7c584eb3ed186be.png Failed to load resource: the server responded with a status of 404 (Not Found)
Font from origin 'https://xxxxxxxxx.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://scorecliq.herokuapp.com' is therefore not allowed access.
Chrome 개발자 도구 콘솔에서 리소스로드와 관련된 오류가 있는지 확인 했습니까? – Conti
두 가지 문제가있을 수 있지만, AWS Cloudfront Forward Header Caching Conflicts : http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html에서 빠르게 살펴볼 것을 권합니다. http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/header-caching.html#header-caching-rtmp Dev 환경에서 CDN에 대한 참조를 허용해야 할 수도 있습니다 ,뿐만 아니라. 필자는 항상 렌더링 된 브라우저 버전의 코드를보고 파일에 대한 참조가 올바른지 확인합니다. –
@MarceloMartins, 크롬 콘솔보기에서 얻은 오류로 제 질문을 업데이트 할 것입니다. – kpaul