Đặt quyền truy cập-Kiểm soát-Cho phép-Xuất xứ trên Cloudfront

Tôi gặp sự cố khi phân phát tài sản tĩnh cho Firefox bằng AWS Cloudfront.

Chrome hoạt động hoàn hảo, nhưng Firefox đang trả về lỗi CORS.

Nếu tôi thực hiện curl, tôi nhận được:

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: ...

Mà tôi nghĩ cần tiêu đề:

Access-Control-Allow-Origin: *

Ai giúp tôi với? Tại sao nó là một vấn đề trên Firefox mà không phải Chrome? Làm thế nào tôi có thể giải quyết nó?

Điều đầu tiên, bạn cần đảm bảo rằng tiêu đề gốc của danh sách trắng:

Nếu bạn muốn CloudFront tôn trọng cài đặt chia sẻ tài nguyên nguồn gốc chéo, hãy định cấu hình CloudFront để chuyển tiếp tiêu đề Origin về nguồn gốc của bạn.

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

Đồng thời xem: http://aws.amazon.com/bloss/aws/enhified-cloudfront-customization/

Nhân tiện, có một số câu hỏi tương tự trên serverfault / stackoverflow và rất nhiều câu trả lời.

Đây là một chút phức tạp hơn so với câu trả lời được chấp nhận chỉ ra.

Hỗ trợ CORS khi sử dụng Cloudfront + S3 thực sự được triển khai trong S3 và nó hoạt động như thế này theo Amazon:

Tiêu đề Origin của yêu cầu phải khớp với phần tử Được phép.

Phương thức yêu cầu (ví dụ: GET hoặc PUT) hoặc tiêu đề Phương thức yêu cầu điều khiển truy cập trong trường hợp yêu cầu TÙY CHỌN trước phải là một trong các yếu tố được cho phép.

Mỗi tiêu đề được liệt kê trong tiêu đề Truy cập-Kiểm soát-Yêu cầu-Tiêu đề của yêu cầu trên yêu cầu preflight phải khớp với phần tử Được phép.

Điều này có ý nghĩa tốt, điều có thể không rõ ràng là nếu không có tiêu đề Xuất xứ nào được gửi bởi khách hàng, thì việc xử lý này hoàn toàn không được thực hiện. Và chúng tôi đang sử dụng Cloudfront ở phía trước, nếu bạn chỉ lưu trữ tài sản tĩnh, có lẽ bạn đã thiết lập nó để bỏ qua tất cả các tiêu đề khi lưu trữ. Do đó, nếu yêu cầu đầu tiên cho mỗi tệp từ một nút cạnh cụ thể không bao gồm tiêu đề Origin, nó sẽ lưu trữ phản hồi mà không có tiêu đề Access-Control-Allow-Origin.

Kết quả là yêu cầu đến đầu tiên sẽ xác định tiêu đề nào được trả về cho tất cả các yêu cầu cho đến khi bộ đệm hết hạn.

Có một số cách để khắc phục / giải pháp này.

• Thiết lập cloudfront để thực hiện bộ đệm ẩn có điều kiện dựa trên tiêu đề "Origin".

Điều này hoạt động tốt nếu bạn chỉ mong đợi một vài hoặc một nguồn gốc duy nhất, nhưng nếu không thì tỷ lệ bộ nhớ đệm của bạn có thể trở nên thực sự tồi tệ.

• Sử dụng Lambda @ edge để đặt các tiêu đề bắt buộc, điều này có thể được thực hiện chỉ một lần cho mỗi yêu cầu gốc (S3).

Hoàn toàn linh hoạt, nhưng thêm chi phí và chi phí.

• Đặt mặt trước đám mây ghi đè tiêu đề "Xuất xứ" thành giá trị giả cho mọi yêu cầu.

Điều này chỉ thực sự hữu ích trong trường hợp "Truy cập-Kiểm soát-Cho phép-Xuất xứ: *" và đó là một chút hack, nhưng có lẽ đây là giải pháp tốt nhất hiện nay khi lưu trữ tài sản tĩnh trên cloudfront + S3.