[server] Cloudfront에서 액세스 제어 허용 원본 설정

Server / 글쓴이

AWS Cloudfront를 사용하여 정적 자산을 Firefox에 제공하는 데 문제가 있습니다.

Chrome은 완벽하게 작동하지만 Firefox에서 CORS 오류를 반환합니다.

curl을 실행하면 다음을 얻습니다.

HTTP/1.1 200 OK
Content-Type: application/x-font-opentype
Content-Length: 39420
Connection: keep-alive
Date: Mon, 11 Aug 2014 21:53:50 GMT
Cache-Control: public, max-age=31557600
Expires: Sun, 09 Aug 2015 01:28:02 GMT
Last-Modified: Fri, 08 Aug 2014 19:28:05 GMT
ETag: "9df744bdf9372cf4cff87bb3e2d68fc8"
Accept-Ranges: bytes
Server: AmazonS3
Age: 2743
X-Cache: Hit from cloudfront
Via: 1.1 c445b20dfbf3128d810e975e5d84e2cd.cloudfront.net (CloudFront)
X-Amz-Cf-Id: ...

헤더가 필요하다고 생각합니다.

Access-Control-Allow-Origin: *

누구든지 나를 도울 수 있습니까? Chrome이 아닌 Firefox에서 왜 문제가 되나요? 어떻게 해결할 수 있습니까?

답변

먼저 오리진 헤더를 허용 목록에 추가해야합니다.

CloudFront가 원본 간 리소스 공유 설정을 준수하도록하려면 Origin 헤더를 오리진으로 전달하도록 CloudFront를 구성하십시오.

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-cors

참조 : http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/

그건 그렇고, serverfault / stackoverflow에 대한 몇 가지 유사한 질문과 많은 답변이 있습니다.

답변

이것은 허용 된 답변보다 약간 더 복잡합니다.

Cloudfront + S3 사용시 CORS 지원은 실제로 S3에서 구현되며 Amazon에 따라 다음과 같이 작동합니다.

요청의 Origin 헤더는 AllowedOrigin 요소와 일치해야합니다.

프리 플라이트 OPTIONS 요청이 AllowedMethod 요소 중 하나 여야하는 경우 요청 방법 (예 : GET 또는 PUT) 또는 액세스 제어 요청-방법 헤더입니다.

프리 플라이트 요청에서 요청의 Access-Control-Request-Headers 헤더에 나열된 모든 헤더는 AllowedHeader 요소와 일치해야합니다.

클라이언트가 Origin 헤더를 보내지 않으면이 처리가 전혀 수행되지 않는다는 것이 분명합니다. 정적 자산을 호스팅하는 경우 캐싱 할 때 모든 헤더를 무시하도록 설정 한 Cloudfront를 앞에서 사용하고 있습니다. 따라서 특정 에지 노드에서 각 파일에 대한 첫 번째 요청에 Origin 헤더가 포함되어 있지 않으면 Access-Control-Allow-Origin 헤더없이 응답을 캐시합니다.

결과적으로 첫 번째 수신 요청은 캐시가 만료 될 때까지 모든 요청에 ​​대해 반환되는 헤더를 결정합니다.

이 문제를 해결 / 해결하는 방법에는 여러 가지가 있습니다.

  • “Origin”헤더를 기반으로 조건부 캐싱을 수행하도록 cloudfront를 설정하십시오.

원점을 몇 개 또는 하나만 기대하면 잘 작동하지만 캐싱 비율이 실제로 나빠질 수 있습니다.

  • Lambda @ edge를 사용하여 헤더를 강제로 설정하십시오. 이는 각 오리진 (S3) 요청에 대해 한 번만 수행 할 수 있습니다.

완전히 유연하지만 오버 헤드와 비용이 추가됩니다.

  • Cloudfront가 모든 요청에 ​​대해 “Origin”헤더를 더미 값으로 대체하도록하십시오.

이것은 “Access-Control-Allow-Origin : *”경우에만 유용하며 약간의 해킹이지만 클라우드 프론트 + S3에서 정적 자산을 호스팅 할 때 가장 현재의 솔루션 일 것입니다.

답변