S3 - Tiêu đề kiểm soát truy cập-cho phép xuất xứ

Có ai quản lý để thêm Access-Control-Allow-Originvào tiêu đề phản hồi? Những gì tôi cần là một cái gì đó như thế này:

<img src="http://360assets.s3.amazonaws.com/tours/8b16734d-336c-48c7-95c4-3a93fa023a57/1_AU_COM_180212_Areitbahn_Hahnkoplift_Bergstation.tiles/l2_f_0101.jpg" />

Yêu cầu nhận này phải chứa trong phản hồi, tiêu đề, Access-Control-Allow-Origin: *

Cài đặt CORS của tôi cho nhóm trông như thế này:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Như bạn có thể mong đợi không có Origintiêu đề phản hồi.

Thông thường, tất cả những gì bạn cần làm là "Thêm cấu hình CORS" trong thuộc tính nhóm của bạn.

Đi <CORSConfiguration>kèm với một số giá trị mặc định. Đó là tất cả những gì tôi cần để giải quyết vấn đề của bạn. Chỉ cần nhấp vào "Lưu" và thử lại để xem nó có hoạt động không. Nếu không, bạn cũng có thể thử mã dưới đây (từ câu trả lời alxrb) dường như đã làm việc cho hầu hết mọi người.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

Để biết thêm thông tin, bạn có thể đọc bài viết này về Chỉnh sửa quyền của nhóm .

Tôi gặp vấn đề tương tự với việc tải phông chữ web, khi tôi nhấp vào 'thêm cấu hình CORS', trong thuộc tính nhóm, mã này đã có sẵn:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration> 

Tôi chỉ cần nhấp vào lưu và nó đã hoạt động, phông chữ web tùy chỉnh của tôi đang tải trong IE & Firefox. Tôi không có chuyên gia về điều này, tôi chỉ nghĩ rằng điều này có thể giúp bạn ra ngoài.

Nếu yêu cầu của bạn không chỉ định Origintiêu đề, S3 sẽ không bao gồm các tiêu đề CORS trong phản hồi. Điều này thực sự đã ném tôi vì tôi đã cố gắng cuộn tròn các tệp để kiểm tra CORS nhưng curl không bao gồm Origin.

@jordanstephens đã nói điều này trong một bình luận, nhưng nó bị lạc và là một sửa chữa thực sự dễ dàng đối với tôi.

Tôi chỉ cần thêm phương thức HEAD và nhấp vào lưu và nó bắt đầu hoạt động.

<CORSConfiguration>
	<CORSRule>
		<AllowedOrigin>*</AllowedOrigin>
		<AllowedMethod>GET</AllowedMethod>
		<AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
		<MaxAgeSeconds>3000</MaxAgeSeconds>
		<AllowedHeader>Authorization</AllowedHeader>
	</CORSRule>
</CORSConfiguration>

Đây là một cách đơn giản để làm cho công việc này.

Tôi biết đây là một câu hỏi cũ, nhưng vẫn khó tìm ra giải pháp.

Để bắt đầu, điều này làm việc cho tôi trong một dự án được xây dựng với Rails 4, Paperclip 4, CamanJS, Heroku và AWS S3.

Bạn phải yêu cầu hình ảnh của bạn bằng cách sử dụng crossorigin: "anonymous"tham số.

    <img href="your-remote-image.jpg" crossorigin="anonymous"> 

Thêm URL trang web của bạn vào CORS trong AWS S3. Đây là một giới thiệu từ Amazon về điều đó. Khá nhiều, chỉ cần đi đến nhóm của bạn, sau đó chọn " Thuộc tính " từ các tab bên phải, mở " tab Quyền và sau đó, nhấp vào" Chỉnh sửa cấu hình CORS ".

Ban đầu, tôi đã < AllowedOrigin>thiết lập *. Chỉ cần thay đổi dấu hoa thị đó thành URL của bạn, đảm bảo bao gồm các tùy chọn như http://và https://trong các dòng riêng biệt. Tôi đã mong đợi rằng dấu hoa thị chấp nhận "Tất cả", nhưng rõ ràng chúng ta phải cụ thể hơn thế.

Đây là cách nó tìm kiếm cho tôi.

Tôi sẽ chỉ thêm vào câu trả lời này. Hãy cố gắng giải quyết vấn đề của tôi.

Để đặt Điểm phân phối AWS / CloudFront đi sâu vào Tiêu đề gốc CORS, nhấp vào giao diện chỉnh sửa cho Điểm phân phối:

Chuyển đến tab hành vi và chỉnh sửa hành vi, thay đổi "Bộ nhớ cache dựa trên tiêu đề yêu cầu đã chọn" từ Không thành danh sách trắng, sau đó đảm bảo Originđược thêm vào hộp danh sách trắng. Xem Định cấu hình CloudFront để tôn trọng cài đặt CORS trong Tài liệu AWS để biết thêm.

Xem câu trả lời ở trên. (nhưng tôi cũng có một lỗi chrome)

Không tải và hiển thị hình ảnh trên trang trong CHROME. (nếu sau này bạn sẽ tạo một phiên bản mới)

Trong trường hợp của tôi, tôi đã tải hình ảnh và hiển thị chúng trên trang. Khi chúng được nhấp, tôi đã tạo một phiên bản mới của chúng:

// there is already an html <img /> on the page, I'm creating a new one now
img = $('<img crossorigin />')[0]
img.onload = function(){
  context.drawImage(img, 0, 0)
  context.getImageData(0,0,w,h)
}
img.src = 'http://s3.amazonaws.com/my/image.png'; // I added arbitrary ?crossorigin to change the URL of this to fix it

Chrome đã lưu bộ nhớ cache của phiên bản khác và KHÔNG BAO GIỜ thử tải lại crossoriginphiên bản (ngay cả khi tôi đang sử dụng crossorigintrên các hình ảnh được hiển thị.

Để khắc phục, tôi đã thêm vào ?crossorigincuối url hình ảnh (nhưng bạn có thể thêm ?blah, nó chỉ tùy ý thay đổi trạng thái bộ đệm) khi tôi tải nó cho canvas .. Hãy cho tôi biết nếu bạn tìm cách khắc phục tốt hơn cho CHROME

Tôi gặp vấn đề tương tự khi tải các mô hình 3D từ S3 vào trình xem 3D javascript (3D HOP), nhưng chỉ đủ lạ với một số loại tệp nhất định (.nxs).

Điều đã sửa nó cho tôi là thay đổi AllowedHeadertừ mặc định Authorizationsang *cấu hình CORS:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Giống như các trạng thái khác, trước tiên bạn cần có cấu hình CORS trong nhóm S3 của mình:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod> <!-- Add this -->
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Nhưng trong trường hợp của tôi sau khi làm điều đó, nó vẫn không hoạt động. Tôi đã sử dụng Chrome (có thể là vấn đề tương tự với các trình duyệt khác).

Vấn đề là Chrome đã lưu trữ hình ảnh bằng các tiêu đề (không chứa dữ liệu CORS) , do đó, dù tôi có cố gắng thay đổi gì trong AWS, tôi sẽ không thấy các tiêu đề CORS của mình.

Sau khi xóa bộ nhớ cache Chrome và tải lại trang , hình ảnh có Tiêu đề CORS dự kiến

Tôi đã đến chủ đề này, và không có giải pháp nào ở trên hóa ra để áp dụng cho trường hợp của tôi. Hóa ra, tôi chỉ đơn giản là phải xóa một dấu gạch chéo khỏi <AllowedOrigin>URL trong cấu hình CORS của nhóm.

Thất bại:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.mywebsite.com/</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Thắng:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://www.mywebsite.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Tôi hy vọng điều này sẽ giúp ai đó nhổ tóc.

Tôi đã thử tất cả các câu trả lời ở trên và không có gì làm việc. Trên thực tế, chúng ta cần 3 bước từ các câu trả lời trên cùng nhau để làm cho nó hoạt động:

1. Theo đề xuất của Flavio; thêm cấu hình CORS vào thùng của bạn:

   <CORSConfiguration>
      <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
      </CORSRule>
    </CORSConfiguration>
   

2. Trên hình ảnh; đề cập đến crossorigin:

   <img href="abc.jpg" crossorigin="anonymous">
   

3. Bạn đang sử dụng CDN? Nếu mọi thứ hoạt động tốt, kết nối với máy chủ gốc nhưng KHÔNG qua CDN; điều đó có nghĩa là bạn cần một số cài đặt trên CDN của mình như chấp nhận các tiêu đề CORS. Cài đặt chính xác phụ thuộc vào CDN bạn đang sử dụng.

1. Đặt cấu hình CORS trong cài đặt Quyền cho bạn S3 nhóm

   <?xml version="1.0" encoding="UTF-8"?>
   <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
       <CORSRule>
           <AllowedOrigin>*</AllowedOrigin>
           <AllowedMethod>GET</AllowedMethod>
           <MaxAgeSeconds>3000</MaxAgeSeconds>
           <AllowedHeader>Authorization</AllowedHeader>
       </CORSRule>
   </CORSConfiguration> 
   

2. S3 chỉ thêm các tiêu đề CORS khi yêu cầu http có Origintiêu đề.

3. CloudFront không chuyển tiếp Origintiêu đề theo mặc định

   Bạn cần đặt Origintiêu đề danh sách trắng trong cài đặt Hành vi cho Phân phối CloudFront của mình.

Tôi đã sửa nó bằng văn bản như sau:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Tại sao <AllowedHeader>*</AllowedHeader>làm việc và <AllowedHeader>Authorization</AllowedHeader>không?

"câu trả lời" của fwuensche là chỉnh sửa để thiết lập CDN; làm điều này, tôi đã loại bỏ MaxAgeSeconds.

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>

Trong Bảng điều khiển quản lý S3 mới nhất, khi bạn nhấp vào cấu hình CORS trên tab Quyền, nó sẽ hiển thị cấu hình CORS mẫu mặc định. Cấu hình này không thực sự hoạt động, tuy nhiên! Trước tiên bạn phải nhấp vào lưu để kích hoạt CORS.

Tôi đã mất quá nhiều thời gian để tìm ra điều này, hy vọng điều này sẽ giúp ai đó tiết kiệm thời gian.

Cấu hình này đã giải quyết vấn đề cho tôi:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Cảnh báo - Hack.

Nếu bạn sử dụng S3Image để hiển thị hình ảnh và sau đó cố gắng tải nó qua tìm nạp, có thể chèn nó vào tệp PDF hoặc thực hiện một số xử lý khác, hãy cảnh báo rằng Chrome sẽ lưu trữ kết quả đầu tiên không yêu cầu yêu cầu chiếu trước CORS và sau đó thử lấy cùng một tài nguyên mà không có yêu cầu TÙY CHỌN trước khi tìm nạp và sẽ thất bại do các hạn chế của trình duyệt.

Một cách khác để khắc phục điều này là đảm bảo rằng S3Image bao gồm crossorigin: 'use-informations' như đã đề cập ở trên. Trong tệp mà bạn sử dụng S3Image, (Tôi có một thành phần tạo phiên bản được lưu trong bộ nhớ cache của S3Image, vì vậy đó là nơi hoàn hảo cho tôi), ghi đè phương thức imageEl nguyên mẫu của S3Image để buộc nó bao gồm thuộc tính này.

S3Image.prototype.imageEl = function (src, theme) {
    if (!src) {
        return null;
    }
    var selected = this.props.selected;
    var containerStyle = { position: 'relative' };
    return (React.createElement("div", { style: containerStyle, onClick: this.handleClick },
        React.createElement("img", { crossOrigin: 'use-credentials', style: theme.photoImg, src: src, onLoad: this.handleOnLoad, onError: this.handleOnError}),
        React.createElement("div", { style: selected ? theme.overlaySelected : theme.overlay })));
};

Vấn đề 403 hiện đã được giải quyết. Đau đớn gì!

<AllowedOrigin>*</AllowedOrigin>

không phải là một ý tưởng hay vì với * bạn cấp bất kỳ trang web nào truy cập vào các tệp trong nhóm của bạn. Thay vào đó, bạn nên chỉ định nguồn gốc nào được phép sử dụng chính xác tài nguyên từ nhóm của bạn. Thông thường, đó là tên miền của bạn như

<AllowedOrigin>https://www.example.com</AllowedOrigin>

hoặc nếu bạn muốn bao gồm tất cả các tên miền phụ có thể:

<AllowedOrigin>*.example.com</AllowedOrigin>

Dưới đây là cấu hình và nó hoạt động tốt với tôi. Tôi hy vọng nó sẽ giúp giải quyết vấn đề của bạn trên AWS S3.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Câu trả lời được chấp nhận hoạt động, nhưng có vẻ như nếu bạn truy cập trực tiếp vào tài nguyên, thì không có tiêu đề nguồn gốc chéo. Nếu bạn đang sử dụng cloudfront, điều này sẽ khiến cloudfront lưu bộ đệm phiên bản mà không có tiêu đề. Khi bạn đi đến một url khác tải tài nguyên này, bạn sẽ gặp vấn đề về nguồn gốc chéo này.

Nếu cài đặt CORS của bạn không giúp bạn.

Xác minh cấu hình S3 là chính xác. Tôi đã có một tên xô không hợp lệ trong Storage.configure. Tôi đã sử dụng một tên ngắn của xô và nó gây ra lỗi:

Không có tiêu đề 'Kiểm soát truy cập-Cho phép-Xuất xứ' trên tài nguyên được yêu cầu.

Đầu tiên, kích hoạt CORS trong thùng S3 của bạn. Sử dụng mã này như một hướng dẫn:

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>http://www.example1.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>http://www.example2.com</AllowedOrigin>

   <AllowedMethod>PUT</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <AllowedMethod>DELETE</AllowedMethod>

   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

2) Nếu nó vẫn không hoạt động, hãy đảm bảo thêm "crossorigin" với giá trị "*" vào thẻ img của bạn. Đặt cái này trong tệp html của bạn:

  let imagenes = document.getElementsByTagName("img");
    for (let i = 0; i < imagenes.length; i++) {
      imagenes[i].setAttribute("crossorigin", "*");

Đối với những gì nó có giá trị, tôi đã có một vấn đề tương tự - khi cố gắng thêm một nguồn gốc được phép cụ thể (không *).

Hóa ra tôi phải sửa

<AllowedOrigin>http://mydomain:3000/</AllowedOrigin>

đến

<AllowedOrigin>http://mydomain:3000</AllowedOrigin>

(lưu ý slah cuối cùng trong URL)

Hy vọng điều này sẽ giúp ai đó