Как отлаживать ошибку CORS

Question

Я пытаюсь захватить изображение из Amazon S3, используя совместное использование ресурсов, чтобы использовать метод canvas.toDataUrl().

На S3 я поставил CORSconfiguration на ведро:

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

Когда canvas.toDataURL() бросил код ошибки безопасности 18, я предположил, что это было потому, что образ должен быть загружен с «crossOrigin» набор атрибутов.

Тем не менее, независимо от того, как я загрузить изображение из S3, например:

<img src="http://s3.amazonaws.com/storybookstorage/wood.png" crossOrigin="anonymous"> 

Chrome в настоящее время не дает мне ошибку, когда я загрузить это изображение:

Перекрестная происхождения изображения нагрузки, запрещенной политикой совместного использования ресурсов Cross-Origin.

Может кто-нибудь помочь мне понять, что это неправильно, или даже, как я мог определить, где эта проблема может быть?

Мои заголовки для запроса изображения (из хромированных инструментов Dev):

Запрос:

GET /storybookstorage/wood.png HTTP/1.1 
Host: s3.amazonaws.com 
Connection: keep-alive 
Cache-Control: max-age=0 
Accept: image/webp,*/*;q=0.8 
If-None-Match: "d5098b2c3d1417da8ccd9764612248ca" 
If-Modified-Since: Thu, 08 Aug 2013 01:10:23 GMT 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36 
DNT: 1 
Referer: http://0.0.0.0:3000/items/1/ 
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8 

Ответ:

Date:Sat, 24 Aug 2013 00:27:56 GMT 
ETag:"d5098b2c3d1417da8ccd9764612248ca" 
Last-Modified:Thu, 08 Aug 2013 01:10:23 GMT 
Server:AmazonS3 
x-amz-id-2:gyR2VMt9hec8HrGvcXvDrrRb/sOm3i/WpUaRdnpr/PY2VoaJigSdA960B0q83zzN 
x-amz-request-id:434E3571705359E9 

Спасибо!

Answer 1

Хорошо, я понял, что проблема. Трудно отлаживать, потому что браузер не дает много информации. Это была проблема на стороне клиента - спецификация CORS действительно придирчива к тому, как делается запрос. Поэтому, в моем случае, я думаю, что проблема заключалась в загрузке изображения только в тег изображения.

Единственный способ, которым это, казалось, работать, если я установить атрибут «crossOrigin» перед загрузкой изображения:

var grabbed = new Image(); 
$(grabbed).attr('crossOrigin', ''); 
$(grabbed).attr("src", mySource); 

Единственный способ, которым я был в состоянии отладки это проверить несколько различных установок на клиенте сторона & различных конфигураций на стороне сервера, потому что заголовки могут быть трудно интерпретировать. (Проблемы на стороне клиента могут создать впечатление, что сервер не настроен должным образом).