Question

代码：我在一些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"]

Answer 1

不使用image_tag，没有。请记住，image_tag所做的就是生成HTML标记。最终用户的浏览器负责加载图像源并显示它。除非我错过了一些重要的内容，否则你无法告诉浏览器通过HTML传递额外的标题。

您可以使用Javascript更改方法并加载这些图像。也许你可以通过这种方式传递标题。

Answer 2

检查How to debug CORS error是否有解决方案。

我花了很多时间以为问题是服务器端，但最后是由于浏览器问题。

您可以通过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
});

希望它有所帮助！

Rails：向image_tag添加请求标头

2 个答案: