画布上的CORS无法在Chrome和Safari上使用 [英] CORS on canvas not working on Chrome and Safari

问题描述

我正在尝试在画布上显示图像.图像托管在S3上.

I'm trying to display images on a canvas. The images are hosted on S3.

在AWS上设置了CORS，并且在脚本中将CrossOrigin属性设置为anonymous.

CORS is set up on AWS, and the CrossOrigin attribute is set to anonymous in the script.

在Firefox上一切正常-但图像未在Chrome和Safari上加载.

Everything works fine on Firefox — but images are not being loaded on Chrome and Safari.

错误Safari:

原点不允许 https://www.example.com 访问控制允许来源. http://mybucket.s3.amazonaws.com/bubble/foo.PNG

Origin https://www.example.com is not allowed by Access-Control-Allow-Origin. http://mybucket.s3.amazonaws.com/bubble/foo.PNG

[错误]无法加载资源:来源 https://www.example.com 不是 由Access-Control-Allow-Origin允许. (foo.PNG，第0行)

[Error] Failed to load resource: Origin https://www.example.com is not allowed by Access-Control-Allow-Origin. (foo.PNG, line 0)

跨源资源共享拒绝跨源图像加载 政策.

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Chrome出现错误:

通过" https://mybucket.s3.amazonaws.com/bubble访问图像/foo.PNG ' 来自原点"null"的数据已被CORS政策阻止:否 请求中存在"Access-Control-Allow-Origin"标头 资源.因此，不允许访问原始空".

Access to Image at 'https://mybucket.s3.amazonaws.com/bubble/foo.PNG' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

CORS配置是非常标准的.我尝试了<AllowedOrigin>*</AllowedOrigin>和其他几个变体，但是并没有什么区别……除了一个例外:<AllowedOrigin>null</AllowedOrigin>似乎适用于Chrome.

The CORS configuration is pretty standard. I tried <AllowedOrigin>*</AllowedOrigin>, and a couple of other variations, but it didn't make any difference … with one exception: <AllowedOrigin>null</AllowedOrigin> seemed to work for Chrome.

CORS配置

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://www.example.com</AllowedOrigin>
    <AllowedOrigin>http://www.example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

画布脚本

let myImage = new Image();
myImage.setAttribute('crossOrigin', 'anonymous');

myImage.src = thisDocument.url;
myImage.onload = function() {
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext('2d');

  canvas.setAttribute('width', 200);
  canvas.setAttribute('height', 200);

  context.fillStyle = hsl(0, 50%, 50%);
  context.fillRect(0, 0, 120, 120);
  context.drawImage(myImage, 12, 12, 60, 60);
};

推荐答案

我有一个与此非常相似的问题(在Safari和Chrome上使用S3托管并出现访问控制错误).

I had a very similar issue to this (using S3 hosting with Access-Control errors on Safari and Chrome).

最终导致了Chrome和Safari特有的缓存问题.如果通过CSS或<img>标签加载图像，则该图像将被缓存而没有Access-Control-Allow-Origin标头.

It ended up being a caching issue specific to Chrome and Safari. If you load an image via CSS or an <img> tag, the image will be cached without the Access-Control-Allow-Origin header.

您可以通过禁用缓存并检查错误是否仍然存在来检查这种情况.如果是问题，此答案可能会有所帮助:

You can check if this is the case for you by disabling caching and checking if the error persists. If it is the issue this answer will likely help: Refresh image with a new one at the same url

这篇关于画布上的CORS无法在Chrome和Safari上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！