12

我尝试使用 Caman.js 并从 Amazon S3 加载图像。Caman.js 是一个用于生成图像效果的 JS 库，它通过将图像副本创建到画布对象并对数据进行各种像素操作来工作。看起来画布有一些安全细节来限制 javascript 在数据来自外部服务器时访问像素数据的能力，除非该服务器在请求中传递一些安全凭证，或跨域资源共享 (CORS ）。

我以前从未遇到过CORS，正在尝试了解它，但我似乎无法使其正常工作。据我了解，为了避免出现在 Chrome 中的这个错误：

Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18

您需要在您的 Amazon 存储桶上设置一个 CORS 文件。这是我正在使用的 CORS 文件：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

这似乎没有任何效果。这些 CORS 文件是由 Amazon 缓存的，还是我应该期望它立即生效？-- 更新：我在 8 小时后尝试了它仍然无法正常工作，所以我认为缓存不是问题。

似乎上面指定的 CORS 文件应该允许所有内容通过，不是吗？我查看了有关 CORS 和 Google 的 Chrome 文档，但似乎找不到任何好的答案。以前有人处理过这个问题吗？

谢谢！凯文

更新：这是我从对亚马逊的图像请求中获得的响应标头：

Date:Thu, 18 Oct 2012 04:52:40 GMT
ETag:"9848ce610c994521295d8aa38b47bab9"
Last-Modified:Thu, 18 Oct 2012 04:19:45 GMT
Server:AmazonS3
x-amz-id-2:Govue0tJg5MLYedr/l7T2RU5RApXLZBwJ8p507hS+sLGqxYojRnVKqj4jRHRZsZ6
x-amz-request-id:F4FF5B669C3156D2
4

1 回答 1

16

尽管这是 4 个月大的问题，但我想通过在此处提供对工作解决方案的引用来帮助获取S3、CORS 和 HTML 画布问题的其他人。

只有在明确要求时，Amazon S3 才会发送跨域标头（请参阅 CORS 规范）。这意味着客户端必须在 HTTP 请求中明确要求它们。预期的行为是客户端将在请求中的“Origin: host-name”标头中指定主机名，服务器将检查它是否应该与特定的源名称共享资源。这里重要的是要了解，如果您的客户端是 Web 浏览器，它不会无缘无故发送此标头。

这就是跨域 ajax 请求的工作方式。最近添加了对字体和图像等其他一些资源的支持。

Images: HTML5 added Cross-Origin support for images in HTML tags and Javascript... Use the crossOrigin attribute on images and the browser will fetch the resource as a Cross-Origin resource (it will add the Origin header to the HTTP request) link to the original post.

The crossorigin attribute is a CORS settings attribute. Its purpose is to allow images from third-party sites that allow cross-origin access to be used with canvas.

read more on MDN

i also fetched similar issue, if you can rely on HTML5 support on the client side, use that solution!

于 2013-03-04T15:45:20.093 回答