Get the Json files from CDN

[criting]

I'm trying to use the Json files from my website's CDN but I get CORS errors when on staging and prod, for some reason it works on local.

var anim = lottie.loadAnimation({
            container: icon[0],
            renderer: 'svg',
            loop: loop,
            autoplay: autoplay,
            path: 'https://myID.cloudfront.net/path-to-json-files/'+icon.attr("data-icon") +'.json';
        });

and I get this error Access to XMLHttpRequest at from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there any way to make this work with files from my CDN?

[bodymovin]

hi, you need to configure your CDN to add the Access-Control-Allow-Origin header to request responses accepting requests from your domain.

[brianjhanson]

@bodymovin I'm chiming in a bit late here, but I'm also running into this today and it seems like the issue (at least for Cloudfront) is that even with the CORs set properly on the bucket and within Cloudfront, AWS requires the Origin header to be sent with the request in order to send the CORS headers back.

From the Troubleshooting CORS article:

Verify that the request has the Origin header. If the header is missing, Amazon S3 doesn't treat the request as a cross-origin request, and doesn't send CORS response headers in the response.

[bodymovin]

@brianjhanson hi, the Origin header should be sent automatically when the domain is different. Can you share an example where this is not working?

[brianjhanson]

@bodymovin thanks for the response! I just tried to create a reduced test case for you but you're right, the origin header is present when I tried it. Seems like my user error somewhere. Sorry for the false alarm!