Rails：将请求标头添加到 image_tag

Posted 2023-03-04

【中文标题】Rails：将请求标头添加到 image_tag

【英文标题】：Rails: Add request headers to image_tag

【发布时间】：2013-07-01 01:25:56

【问题描述】：

代码：我在某个 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"]

【问题讨论】：

我遇到了完全相同的问题。你是怎么做到的？有什么解决办法吗？顺便说一句，我的在 Firefox 中工作，但不在 Chrome 中。

不幸的是，没有明确的方法来请求某些标头。我尝试通过 javascript 加载图像，但由于明显的安全问题，浏览器不允许设置特定的标头（'Origin'）。我们用一些服务器端脚本解决了这个问题，但我不是解决方案的人，所以我没有实现细节（如果你坚持，我可以检查代码库）。

【参考方案1】：

不使用 image_tag，不。记住 image_tag 所做的只是生成 html 标签。最终用户的浏览器负责加载图像源并显示它。除非我错过了一些重要的东西，否则您无法告诉浏览器通过 HTML 传递额外的标头。

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

【参考方案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
);

希望对你有帮助！