CORS and Media Library Resources

Question

I have a Lottie animation JSON object that I want to use in all my various JSS Angular apps hosted from different domains. Ideally, I'd have that animation file in the Media Library so it can be updated easily and shared by multiple apps. However, the Lottie code uses XMLHttpRequest to download the JSON file, which means my connected JSS app on one domain is getting CORS denied errors when it asks for the resource on my shared Sitecore instance domain.

Is there a way to add the Media Library controller to the JSS ApiKey "Allowed Controllers" setting? Or is there some other way within Sitecore to add CORS headers to Media Library responses? What I don't want to do is to have to update my web.config every time a new JSS application comes online. And I don't really want to wildcard everything, either.

If all else fails, I can just have all the applications put that JSON file in their assets folder so they don't need CORS at all, but that prevents sharing and easy updates.

Thanks!

Answer 1

If you're using headless mode in production, you can avoid needing CORS (and additional preflight requests) by taking advantage of the reverse proxy built into headless mode and requesting the media using local URLs (https://head.less/-/media/...)

A similar configuration can be done in connected mode by using the local proxy functionality built into Angular to proxy /-/media -> http://local.site.core/-/media.