3

コード: HAML ファイルで次のコードを取得しました。

= image_tag "https://s3.amazonaws.com/my_bucket/my_image.jpg"

s3 にリクエストを送信し、ブラウザーに画像を読み込みます。バケットで次の CORS 構成を取得しました。

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://www.my_site.com</AllowedOrigin>

   <AllowedMethod>GET</AllowedMethod>

 </CORSRule>
</CORSConfiguration>

問題: クライアント側で画像を操作できるようにするために、画像は次のヘッダーで提供されることになっています。

  Access-Control-Allow-Origin: https://www.my_site.com
  Access-Control-Allow-Methods: GET

しかし、これは起こりません。

原因:ブラウザが「Origin」リクエスト ヘッダーを送信しないため、s3 が必要なヘッダーで応答しません。

「Origin」ヘッダーがないことが原因だと思う理由: の応答のため:

wget  --server-response --header "Origin:https://www.my_site.com" "https://s3.amazonaws.com/my_bucket/my_image.jpg"

は次のとおりです。

 HTTP/1.1 200 OK
  x-amz-id-2: kQV8HEChV1...QHmHC1Gt/
  x-amz-request-id: A626...4A2
  Date: Wed, 03 Jul 2013 10:10:38 GMT
  Access-Control-Allow-Origin: https://www.my_site.com
  Access-Control-Allow-Methods: GET
  Access-Control-Allow-Credentials: true
  Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
  ...

つまり、'Access-Control-Allow-Origin' と 'Access-Control-Allow-Methods' が存在します。

想定される解決策:

HAML ファイルの image_tag に必要なヘッダーを手動で追加する方法はありますか? 何かのようなもの：

= image_tag "https://s3.amazonaws.com/my_bucket/my_image.jpg", :headers=>["Origin"]
4

2 に答える 2

2

image_tag を使用していません。image_tag が行うことは、HTML タグを生成することだけであることを思い出してください。エンド ユーザーのブラウザは、画像ソースを読み込んで表示する役割を果たします。何か大きなことを見逃していない限り、ブラウザーに HTML 経由で追加のヘッダーを渡すように指示する方法はありません。

メソッドを変更して、Javascript を使用してこれらの画像をロードできる場合があります。たぶん、そのようにヘッダーを渡すことができます。

于 2013-07-03T16:38:22.317 に答える
1

解決策については、 CORS エラーをデバッグする方法を確認してください。

問題はサーバー側であると考えるのに多くの時間を費やしましたが、最終的にはブラウザの問題が原因でした.

JavaScript を介して画像を読み込むことで、Chrome に適切な CORS プロトコルを使用させることができます。HTML を空の img タグに変更し、画像をロードしてみてください。お気に入り：

<span id="source-url" class="hidden"><%= @product.images.first.attachment.url(:large) %></span>

<img id="art-image">

および .js ファイルで

artImage = document.getElementById('art-image');
$(artImage).attr('crossOrigin', '');
$(artImage).attr("src", $("#source-url").text());
$(artImage).one('load', function() {
  // image processing
});

それが役に立てば幸い！

于 2013-11-13T20:11:24.927 に答える