3

私たちのウェブサイトは、 「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 では、これは問題になりません。

4

1 に答える 1