使用TensorFlow.js对Cloudinary图像进行分类时，如何解决CORS错误？

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错误问题。

然后必须直接在html上设置图像的crossOrigin属性

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

或在js脚本中

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