Как решить эту ошибку CORS при использовании TensorFlow.js для классификации облачных изображений?

Question

Я использую компонент Vuetify Cloudinary Upload для загрузки изображений в мое приложение Vue.Затем я хочу запустить на них библиотеку TensorFlow.js для классификации объектов.К сожалению, я получаю эту ошибку:

DOMException: Не удалось выполнить 'texImage2D' для 'WebGL2RenderingContext': элемент изображения содержит данные из разных источников и может не загружаться.

Вот мой соответствующий код:

import * as cocoSSD from '@tensorflow-models/coco-ssd';
let images = document.getElementsByTagName("img");
let imagePromises = [];
for (let image of images)
    {
        image.setAttribute('crossOrigin', 'anonymous');
        imagePromises.push(this.model.detect(image)
            .then(classified => this.objects.push(classified))
            .catch(e => {console.log(e)})
        )}
await Promise.all(imagePromises);

Answer 1

Изображение должно обслуживаться сервером, который обеспечивает перекрестное происхождение.Использование изображения непосредственно из файловой системы всегда приводит к ошибке cors.

Тогда атрибут crossOrigin изображения должен быть установлен либо непосредственно в html

<img src="url" crossorigin="anonymous">

, либо вJS скрипт

image.setAttribute('crossOrigin', 'anonymous'); 
// or
image.crossOrigin = "anonymous";