Access blocked by CORS policy when loading .riv media from Prismic

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!

1 Like

Hey @cords,

I'm not 100% certain that our API supports .riv files. I'm going to forward this to our developers to see if they have any insight here. However, you might want to try hosting your .riv files elsewhere for now.

Sam