Question

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

这是我可以编辑的图片：

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

这是我无法解决的问题（源自“https://d2t4fc8ff77neh.cloudfront.net”的图像已被跨源资源共享策略阻止加载：请求中没有“Access-Control-Allow-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>标记。您也可以始终为*发送CORS标头，即使没有Origin标头也是如此。

您的resizing功能中也存在一个奇怪的问题，但如果您无法自行解决，我认为这是一个新问题的内容。

缓存控制和画布

1 个答案:

缓存/跨源问题