We have some custom Rive animations that we would like to include in our Next.js app via Prismic slices. I’ve uploaded the .riv files to our Prismic project’s media library, and I have a few slice instances that reference these files via a Link to Media field type.
Using the Rive React library, I’m attempting to render the Rive asset like so:
// Prismic field value which resolves to a URL string like
// https://MY_PROJECT_NAME.cdn.prismic.io/MY_PROJECT_NAME/MY_FILE_NAME.riv
const src = prismic.asLink(item.link)
const { rive, RiveComponent } = useRive({
src: src,
stateMachines: "customStateMachine",
autoplay: false,
});
return (
<RiveComponent/>
)
This works with Rive assets hosted elsewhere. But with a Rive asset stored in Prismic, I get this console error:
Access to fetch at 'https://MY_PROJECT_NAME.cdn.prismic.io/MY_PROJECT_NAME/MY_FILE_NAME.riv' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
I saw a similar thread around SVGs that I believe required a fix on Prismic’s side. Is there something I can adjust on my end to access .riv files stored in my Prismic project’s Media Library? Has anyone else had issues with non-standard file types in their media library?
Thanks!