Rails:添加请求头到image_tag。

The code: I got the following piece of code in some HAML file.

代码:我在某个HAML文件中获得了以下代码。

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

It sends a request to s3 and loads the image in the browser. I got the following CORS configuration on the bucket:

它向s3发送请求并在浏览器中加载映像。我在桶上有如下CORS配置:

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

   <AllowedMethod>GET</AllowedMethod>

 </CORSRule>
</CORSConfiguration>

The problerm: In order to be able to manipulate the images on client side, the images are supposed to be served with the following headers:

问题:为了能够在客户端操作图像，图像应该被服务于以下的标题:

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

but this does not happen.

但这并没有发生。

The cause: My browser does not send 'Origin' request header, and therefore s3 does not respond with the desired headers.

原因:我的浏览器不发送“起源”请求头，因此s3不响应所需的头。

Why I think that missing "Origin" header is the cause: Because the response of:

为什么我认为缺少了“原点”页眉是原因:因为:

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
  ...

i.e. the 'Access-Control-Allow-Origin' and 'Access-Control-Allow-Methods' are present.

例如，“访问控制允许的来源”和“访问控制允许的方法”都是存在的。

The supposed solution:

所谓的解决方案:

Is there a way to add manually the desired headers to the image_tag in the HAML file? Something like:

是否有一种方法可以将所需的头文件手工添加到HAML文件中的image_tag中?喜欢的东西:

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

2 个解决方案

#1

Not using image_tag, no. Remember all image_tag does is generate the HTML tag. The end user's browser is responsible for loading the image source and displaying it. Unless I've missed something major, there isn't any way for you to tell the browser to pass additional headers via HTML.

不使用image_tag,不。记住，image_tag所做的就是生成HTML标记。终端用户的浏览器负责加载和显示图像源。除非我错过了什么专业，否则你没有办法让浏览器通过HTML传递额外的标题。

You might be able to change your method and load those images using Javascript. Maybe you can pass headers that way.

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

#2

Check How to debug CORS error for a solution.

检查如何调试一个解决方案的CORS错误。

I spent a lot of time thinking the problem was server side but finally it was due to a browser issue.

我花了很多时间思考问题是服务器方面的，但最终还是由于浏览器的问题。

You can force Chrome to user the proper CORS protocol by loading your image through JavaScript. Try changing your html to an empty img tag and loading your image into it. Like:

你可以通过JavaScript加载你的图像来强制Chrome使用合适的CORS协议。尝试将html更改为空img标记，并将图像加载到其中。如:

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

<img id="art-image">

< img id =“审美意象”>

and in a .js file

在。js文件中

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

Hope it helps!

希望它可以帮助!

#1