Rails：在image_tag中添加请求头

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"

is the following:

 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"]

- Kiril Kirilov

---

我遇到了完全相同的问题。你是如何解决的？有什么解决方案吗？顺便说一下，我的在Firefox中可以工作但在Chrome中不行。 - Flavio Wuensche

很遗憾，没有明确的方法来请求特定的头信息。我尝试通过JavaScript加载图像，但是浏览器不允许设置特定的头信息（“Origin”），因为存在明显的安全问题。我们通过一些服务器端脚本解决了这个问题，但我不是解决方案的人，所以我没有实现细节（如果您坚持，我可以检查代码库）。 - Kiril Kirilov

Answer 1

不使用image_tag的话，是不行的。请记住，所有image_tag所做的就是生成HTML标签。最终用户的浏览器负责加载图像源并显示它。除非我漏掉了什么重要的东西，否则你没有任何办法告诉浏览器通过HTML传递附加标头。也许您可以更改方法并使用Javascript加载这些图像。也许您可以通过这种方式传递标头。

- Philip Hallstrom

Answer 2

查看如何调试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
});

希望它有所帮助！

- rgomes