cache-control 和 canvas 的访问控制问题

Question

我正在尝试使用浏览器 canvas 来处理我在云端托管的图像。我正在尝试设置 cloudfront 让浏览器缓存带有缓存控制的图像 max-age 并且仍然允许 canvas 编辑这些图像。

这是我可以编辑的图片：

https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01l796_16dbmg07t_books2.jpg

这是我不能访问的一个（来自来源'https://d2t4fc8ff77neh.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost'的图片因此不允许访问。）：

https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01o3l0_16dbmg07t_books2.jpg

唯一不同的是 cache-controls header。怎么了？谢谢。

我正在使用 node.js knox 库上传。示例 headers:

var headers = {
  'Content-Length': options.data.length,
  'Vary': 'Accept-Encoding',
  // 'Cache-Control': 'public, max-age=31536000',
  'x-amz-acl': 'public-read',
  'Content-Type': options.type
}

Answer 1

好的，我假设您只想加载图像而不想将它们保存 (POST) 回原样 URI。这有效！

Here 是适用于两个图像的 jsbin。这是代码：

var img1 = new Image();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');


//drawing of the test image - img1
img1.onload = function () {
  ctx.drawImage(img1, 0, 0);
};

//img1.src = 'https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01l796_16dbmg07t_books2.jpg';
img1.src = 'https://d2t4fc8ff77neh.cloudfront.net/cardSrcImage/1ac01o3l0_16dbmg07t_books2.jpg';

和html中的canvas：

<canvas id="canvas" width="1000" height="1000"></canvas>

所以你的问题可能是你如何加载图像，但你没有向我们展示你的代码。

caching/cross-origin 问题

你的问题是 <img> 标签和 Javascript Image 有非常不同的行为。您可以在不进行任何来源检查的情况下使用 <img> 标签包含来自整个互联网的图像，但对于 Javascript Image 同源策略处于活动状态。

在您的原始 HTML 中，您的图片有 <img> 个标签。这会使您的浏览器在没有 Origin header 的情况下获取图像。这会导致您的服务器不发送 CORS Headers.

稍后当您使用 Javascript Image 时，您的浏览器有一个缓存版本 没有 CORS headers 并且会响应.所以请求会失败！

有时看起来 chrome 足够聪明，可以提出额外的要求，但这绝对不理想。

现在应该很容易解决这个问题。也许首先使用 Image 然后再使用 <img> 标签，或者根本不使用 <img> 标签。您也可以始终为 * 发送 CORS Headers，即使 Origin Header 不存在。

你的 resizing 函数也有一个奇怪的问题，但我认为如果你不能自己解决它，这是一个新问题的内容。

cache-control 和 canvas 的访问控制问题

Access control problems with cache-control and canvas

javascript

cache-control

amazon-web-services

http-headers

amazon-cloudfront

caching/cross-origin 问题