I had an issue with my gifs hosted on my s3 bucket not showing the still at the beginning and it took me a long time to debug so I thought I would post what I did to fix it in case anyone else has this issue.
The first issue is that you need to configure CORS on your s3 bucket and allow your origin as well as the "GET" method. If this is not set you cannot make cross origin requests to your s3 bucket.
If you want to allow from any origin and with any header you can use the following code as CORS config in your s3 bucket permissions:
The second issue that took me some time to figure out was a caching issue in chrome. The package is setting the image "crossOrigin" attribute to "anonymous" which excludes the origin header in the request. This is fine for setting an img src but in order to get the "Access-Control-Allow-Origin" in the response from S3 the origin must be present in the headers.
Because chrome caches the previous request, it looks at the same response headers for the javascript request, it does not see any "Access-Control-Allow-Origin" header and then throws a CORS error.
The solution is to set the crossoriging property to true in the GifPlayer component as below:
<GifPlayer gif={imageUrl} crossorigin="true" />
This way the origin headers are included in the initial request and as such are cached and present when the javascript request is made.
Hi there,
I had an issue with my gifs hosted on my s3 bucket not showing the still at the beginning and it took me a long time to debug so I thought I would post what I did to fix it in case anyone else has this issue.
The first issue is that you need to configure CORS on your s3 bucket and allow your origin as well as the "GET" method. If this is not set you cannot make cross origin requests to your s3 bucket.
If you want to allow from any origin and with any header you can use the following code as CORS config in your s3 bucket permissions:
The second issue that took me some time to figure out was a caching issue in chrome. The package is setting the image "crossOrigin" attribute to "anonymous" which excludes the origin header in the request. This is fine for setting an img src but in order to get the "Access-Control-Allow-Origin" in the response from S3 the origin must be present in the headers.
Because chrome caches the previous request, it looks at the same response headers for the javascript request, it does not see any "Access-Control-Allow-Origin" header and then throws a CORS error.
The solution is to set the crossoriging property to true in the GifPlayer component as below:
This way the origin headers are included in the initial request and as such are cached and present when the javascript request is made.