Конфигурация CORS на AWS S3 не работает

У меня есть рельсы 4 приложения, которые используют холст html5 для дизайна футболки. Fabricjs используется как библиотека холстов HTML5. Когда я добавляю текстовый объект на холст и вызываю метод toDataURL, он отлично работает. При добавлении SVG изображение подается через AWS S3 на холсте, он загружается на холсте, но когда я называю toDataURL на холсте, он становится пустым, и я получаю следующее сообщение об ошибке на консоли:Конфигурация CORS на AWS S3 не работает

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Первоначально, когда изображения служили над S3 загружается на документ, я получаю следующее сообщение об ошибке:

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure image 'http://example.s3.amazonaws.com/clip_arts/arts/000/000/001/thumb/1.png?1431770898'. This content should also be served over HTTPS.

Я искал через интернет и выяснил, что это будет проблемой CORS. В моем AWS ведро, я добавил следующую конфигурацию CORS:

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

Позвони toDataURL прекрасно работает на Firefox, но не работает на других браузерах.

источник

2015-05-19 ingnam

Вы можете добавить crossOrigin:'Anonymous' к функции,

fabric.loadSVGFromURL(svgUrl,function(objects,options) { 

}, { 
    crossOrigin: 'Anonymous' 
});

И вместо того, чтобы это в CORS

<AllowedHeader>Content-*</AllowedHeader> 
<AllowedHeader>Host</AllowedHeader>

Просто добавьте к этому CORS

<AllowedHeader>*</AllowedHeader>

источник

2015-05-19 07:12:32

Я использую 'fabric.Image.fromURL', чтобы добавить изображение на холст, и когда я добавил crossOrigin:« анонимный »в этой функции, я получаю ошибку« Исход из источника заблокирован. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Я также использовал 'fabric.loadSVGFromURL' и получил ошибку' Смешанное содержимое: страница в 'https: //' была загружена через HTTPS, но запросила небезопасную конечную точку XMLHttpRequest'. В обоих случаях изображение не загружалось в холст. – ingnam

В дополнение к Khawer Zeshan ответ.

У меня была такая же проблема, используя toDataURL на Chrome. Я добавил <AllowedOrigin>Anonymous</AllowedOrigin> в дополнение к <AllowedOrigin>*</AllowedOrigin> в конфигурацию AWS S3 CORS. Это сработало для меня.

источник

2015-07-22 22:24:16 novasaint

Конфигурация CORS на AWS S3 не работает

ответ

Смежные вопросы