Loading rive file from URL

[Leon Duffus]

In my compronent I want to load a rive file by setting src to a URL as outlined in the readme, however I am receiving the Problem loading file; may be corrupt! error.

My Code is as follows and the rive file is i n an S3 bucket which has public read permissions

import React from 'react'
import { useRive } from 'rive-react';

function ChunkySoapBounce() {

  const errorHandle = () => {
    console.log('Could not load the Rive file')
  }

  const { RiveComponent } = useRive({
    src: 'https://chunksysoap-1.s3.eu-west-2.amazonaws.com/animations/chunky_bounce.riv',
    autoplay: true,
    onLoadError: errorHandle()
  });

  return <RiveComponent />;
}


export default ChunkySoapBounce

[Arthur Vivian]

Hey @moringaman, sorry for not getting back to you sooner. I tried to reproduce this and I'm getting a CORS error in my console which I think is the problem.

Access to fetch at 'https://chunksysoap-1.s3.eu-west-2.amazonaws.com/animations/chunky_bounce.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.

Have a look at this page for how to configure cors on your bucket: https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html

[Joshua Baker]

Quick example…

[
  {
    "AllowedHeaders": [],
    "AllowedMethods": ["GET"],
    "AllowedOrigins": ["http://localhost:*","https://localhost:*"],
    "ExposeHeaders": []
  }
]