2

I'm trying to load images into the Aviary photo editor that I have integrated with my app. The photos are hosted on AWS, while my app is on Heroku. Whenever I load the photos into the app, they show up fine, however when I pass them into the Aviary SDK, which tries to load them onto the Adobe Cloud server, I get a CORS error:

Image from origin 'https://s3.amazonaws.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://app.example.com' is therefore not allowed access.

I've read Amazon's doc on CORS but I'm struggling to get it to work. I have the following access policy for my bucket:

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

What's more confusing is that this only seems to happen sometimes. Other times the image loads into the editor just fine. Sometimes this happens on localhost as well. The error is the same, except that the last line is Origin 'null' is therefore not allowed access.

I've also tried the following policy, without success.

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

    <CORSRule>
        <AllowedOrigin>http://app.example.com/</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>

    <CORSRule>
        <AllowedOrigin>http://app.example.local:3000/</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

I should also note that this issue seems to only occur occasionally on my computer (Mac), but occurs all the time on Chrome (latest) for Windows.

Daniel Bonnell
  • 4,817
  • 9
  • 48
  • 88
  • Are you sure "Origin" header is being included in the HTTP request made by this SDK? – Edson Marquezani Filho Feb 13 '16 at 23:07
  • No idea. Would the lack there-of cause the image to be rejected by Chrome on Windows but not on Mac? So far I've tested on Chrome and Firefox for Mac and it works on those browsers. On Windows it works in IE 11 but not Chrome (there's something you don't see every day). – Daniel Bonnell Feb 13 '16 at 23:46
  • Hit F12 on Chrome and locate the request to the image. Look at the request headers. It's weird to not work only on an specific browser, but maybe it's some different behaviour of the JS engine. Anyway, first you need to be sure the 'Origin' header is being sent. – Edson Marquezani Filho Feb 14 '16 at 02:06

0 Answers0