Sau một số điều chỉnh, tôi dường như đã làm cho nó hoạt động mà không cần hack chuỗi truy vấn. Thêm thông tin tại đây: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorS3Origin.html#RequestS3-cors
Tôi sẽ thực hiện toàn bộ thiết lập của mình để dễ dàng xem những gì tôi đã làm, hy vọng điều này sẽ giúp những người khác.
Thông tin cơ bản: Tôi đang sử dụng ứng dụng Rails có đá quý property_sync để đưa tài sản lên S3. Điều này bao gồm phông chữ.
Trong bảng điều khiển S3, tôi đã nhấp vào nhóm của mình, thuộc tính và 'chỉnh sửa cấu hình cors', tại đây:
Bên trong textarea tôi có một cái gì đó như:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://*.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Sau đó, trong bảng điều khiển Cloudfront ( https://console.aws.amazon.com/cloudfront/home ) Tôi đã tạo một bản phân phối, thêm một Nguồn gốc chỉ vào nhóm S3 của tôi
Sau đó, thêm một hành vi cho một đường dẫn mặc định để trỏ đến thiết lập gốc dựa trên S3 mà tôi thiết lập. Những gì tôi cũng đã làm là nhấp vào tiêu đề Whitelist và thêm Origin
:
Điều gì xảy ra bây giờ là như sau, mà tôi tin là đúng:
1) Kiểm tra xem các tiêu đề S3 có được đặt chính xác không
curl -i -H "Origin: https://example.com" https://s3.amazonaws.com/xxxxxxxxx/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
x-amz-id-2: Ay63Qb5uR98ag47SRJ91+YALtc4onRu1JUJgMTU98Es/pzQ3ckmuWhzzbTgDTCt+
x-amz-request-id: F1FFE275C0FBE500
Date: Thu, 14 Aug 2014 09:39:40 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Content-Type: application/x-font-ttf
Content-Length: 12156
Server: AmazonS3
2) Kiểm tra Cloudfront hoạt động với các tiêu đề
curl -i -H "Origin: https://example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 09:35:26 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 77bdacfea247b6cbe84dffa61da5a554.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cmCxaUcFf3bT48zpPw0Q-vDDza0nZoWm9-_3qY5pJBhj64iTpkgMlg==
(Lưu ý ở trên là một lỗi từ đám mây vì các tệp này được lưu trong bộ nhớ cache trong 180 giây, nhưng cùng hoạt động với các lần truy cập)
3) Lượt truy cập trên nền tảng đám mây với nguồn gốc khác (nhưng được cho phép trên CORS cho nhóm S3) - Access-Control-Allow-Origin
không được lưu trong bộ nhớ cache! vâng
curl -i -H "Origin: https://www2.example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 10:02:33 GMT
Access-Control-Allow-Origin: https://www2.example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 ba7014bad8e9bf2ed075d09443dcc4f1.cloudfront.net (CloudFront)
X-Amz-Cf-Id: vy-UccJ094cjdbdT0tcKuil22XYwWdIECdBZ_5hqoTjr0tNH80NQPg==
Lưu ý ở trên rằng tên miền đã thay đổi thành công mà không cần hack chuỗi truy vấn.
Khi tôi thay đổi tiêu đề Origin, dường như luôn có một X-Cache: Miss from cloudfront
yêu cầu đầu tiên, sau đó tôi nhận được mong đợiX-Cache: Hit from cloudfront
PS Điều đáng chú ý là khi thực hiện curl -I (viết hoa I) sẽ KHÔNG hiển thị các tiêu đề Access-Control-Allow-Origin vì nó chỉ là một Head, tôi làm -i để làm cho nó NHẬN và cuộn lên.
Access-Control-Allow-Origin
tiêu đề được lưu vào bộ đệm và vô hiệu hóa CORS khi yêu cầu tiếp theo được thực hiện thông qua một tên miền phụ khác?