缓存控制和画布的访问控制问题

Question

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

这是我可以编辑的图像：

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

这是我不能的（来自“https://d2t4fc8ff77neh.cloudfront.net”的图像已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'https://localhost' 因此不允许访问。）：

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

唯一不同的是缓存控制标头。怎么了？谢谢。

我正在使用 node.js knox 库进行上传。示例标题：

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>

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

缓存/跨域问题

您的问题是 <img> 标记和 Javascript Image 具有非常不同的行为。您可以使用 <img> 标签包含来自互联网的所有图像，而无需进行任何来源检查，但对于 Javascript Image，您的相同来源策略是有效的。

在您原来的HTML 中，您的图像有<img> 标签。这会使您的浏览器获取没有Origin 标头的图像。这会导致您的服务器不发送 CORS 标头。

稍后当您使用 Javascript Image 时，您的浏览器会有一个缓存版本没有 CORS 标头，并且会对此做出响应。所以请求会失败！

有时看起来 chrome 足够智能，可以发出额外的请求，但这绝对不理想。

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

---

您的resizing 函数中还有一个奇怪的问题，但我认为如果您自己无法解决，这是一个新问题的内容。