我有一个 Rails 3 应用程序，其图像托管在 AWS S3 上并由 Paperclip gem 管理。
我正在尝试对其进行设置，以便用户可以使用 js 库在浏览器中编辑这些图像（现在我正在使用 Pixastic，但我愿意尝试 Caman）但遇到了 js 图像的问题操作库失败是因为浏览器的 CSRF 保护拒绝 S3 图像来自不同的域。
有没有办法代理图像，使它们看起来来自同一个域，或者以其他方式解决这个问题？
问问题
655 次
1 回答
4
我刚刚和一个合作伙伴一起用 CamanJS 解决了这个问题。
在不知道您如何构建您的视图（并且根本不了解 Pixastic）的情况下，我会尽力回答。
假设您要链接到 html 中的原始图像，请添加crossorigin='anonymous'到图像标记中：
<img class='image' crossorigin='anonymous' data-camanheight='450' src=<%= @photo.url%>>
这将设置浏览器的期望，即图像不会来自您网站的 url。
我们发现这适用于初始图像，但是当 CamanJS 的 revert() 函数重建图像（在将其转换回画布元素之前）时，它遗漏了让浏览器知道它可以交叉的标题信息-来源数据。因此，每次我们还原图像时，都会再次遇到 CORS 问题。我简要浏览了 Pixastic 的文档，但无法就您是否会遇到类似问题提供建议。
注意：超级流畅的体验是我们的首要任务，我们不想设置代理，所以我们的解决方法是将手头上的图像标签的克隆保留在 Javascript 变量中，并编写我们自己的方法来恢复画布，重新克隆图像标签，将克隆的标签之一推入 DOM，然后将其转换为新的画布元素并摆脱旧的元素。它遇到了一些 CamanJS 特定的行为，使其有点“hacky”。
我的项目合作伙伴已向 CamanJS 提交了保留标头信息的拉取请求，因此可能很快就会解决此问题，从而使 CamanJS 成为跨源资源共享的更好解决方案。
希望这可以帮助。
于 2012-12-01T08:34:05.847 回答