私たちのウェブサイトは、 「Anonymous」に設定されたcrossOrigin属性を使用して、Amazon S3 から画像を読み込むクロムで問題が発生しています。
私たちの S3 サーバーは次のように設定されています。
`
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
<ExposeHeader>x-amz-request-id</ExposeHeader>
<ExposeHeader>x-amz-id-2</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
`
リモート イメージ (Amazon S3 サーバー上) を含む SVG からキャンバスを作成するために canvg.js を使用していますが、クロム ブラウザから「要求されたリソースに'Access-Control-Allow-Origin' ヘッダーが存在しません」というメッセージが返されます。このコードを実行した後のエラー:
this.img = document.createElement('img');
var self = this;
this.img.onload = function() { self.loaded = true; }
this.img.onerror = function() { if (typeof(console) != 'undefined')
console.log('ERROR: image "' + href + '" not found'); self.loaded = true; } }
if (svg.opts['useCORS'] == true) {
this.img.crossOrigin = 'Anonymous'; }
this.img.src = href;
firefox と IE では、これは問題になりません。