时间戳

首页 > 解决方案 > 当我将跨域设置为匿名时，无法加载图像（操作被 cors 策略阻止）

javascript - 当我将跨域设置为匿名时，无法加载图像（操作被 cors 策略阻止）

问题描述

所以，我开始使用 javascript 进行机器学习，我想看看一个图像分类器模型的实际应用。

因此，当我尝试在浏览器中加载图像时，它不起作用。

这是我得到的错误：

Access to image at 'file:///F:/rishit/ml5/imagerecognition/bird.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

这是我的 index.html

<!DOCTYPE html>

<html>
    <head>
<meta charset="utf-8">

<title>ML-5</title>

<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>

    </head>
<body>
    
<h1 style="text-align: center;" >Image classification</h1>
<img src="bird.png"
 alt="bird" id ="bird"   >
    <script src="script.js"></script>
</body>


</html>

这是我的 script.js

let img = document.getElementById('bird')
img.crossOrigin = 'Anonymous'

let classifier = ml5.imageClassifier('MobileNet',onLoad)

function onLoad(){
    console.log('yay!,its Done')
} 

classifier.classify(img).then(
    (results)=>{console.log(results)}
)

这是我的文件结构

鸟.png index.html script.js

标签： javascripthtml

解决方案

您确定从正确的文件夹中提供图像吗？Access to image at 'file:///F:/rishit/ml5/imagerecognition/bird.png' 从原点“空”。

我认为您不应该添加img.crossOrigin = 'Anonymous'或类似的内容，很可能是您提供静态文件的方式有问题

推荐阅读