Question

我试图使用Caman.js并从Amazon S3加载图像。 Caman.js是一个用于生成图像效果的JS库，它通过将一个图像副本创建到画布对象并对数据进行各种像素处理来工作。看起来canvas有一些安全细节来限制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文件是由亚马逊缓存还是我希望它立即生效？ - 更新：我试过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

Answer 1

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

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

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

图片： HTML5为HTML标签和Javascript中的图像添加了Cross-Origin支持...在图像上使用 crossOrigin 属性，浏览器将获取资源作为跨源资源（它将添加原始标头到HTTP请求）link to the original post。

crossorigin 属性是CORS设置属性。它的目的是允许来自允许跨域访问的第三方网站的图片 与画布一起使用。

read more on MDN

我也提出了类似的问题，如果您可以依赖客户端的HTML5支持，请使用该解决方案！

画布中图像的CORS设置

1 个答案: