vendredi 2 juillet 2021

Image path from API loads and displays but color-extraction library using image path causes CORS 'Access-Control-Allow-Origin' error

I use an external Movie API with responses that include a path to a movie poster eg. https://yts.mx/assets/images/movies/tenet_2020/medium-cover.jpg. I then display the image in a preview component with no problem

<img
  [src]="movie.poster_path"
  *ngFor="let movie of init.movies"
  (click)="getVibrant(movie.poster_path)"
/>

When I click the image, the poster_path is passed to a function that uses the node-vibrant library to extract colors from the image, but the Vibrant constructor needs the poster_path

let vibrant = new Vibrant(poster_path)

And this causes the CORS error:

Access to image at 'https://yts.mx/assets/images/movies/tenet_2020/medium-cover.jpg' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there a way I can somehow cache the image (I have no clue how to do that) or some other way I can fix this?




Aucun commentaire:

Enregistrer un commentaire