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 回答