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

Question

所以，我开始在 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)}
)

这是我的文件结构

Bird.png index.html script.js

Answer 1

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

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

Answer 2

只有当您直接从文件资源管理器打开 index.html 时，问题才会持续存在。 因为它使用 file:// 协议。

当您托管它或在 Visual Studio Code 中使用 Live Server 扩展（我强烈推荐）之类的东西时，一切都应该正常工作，因为它将使用 http:// 协议。

Answer 3

我为我的 web 应用程序执行此操作。 仅使用 html 和 javascript 从桌面和 Web 服务器工作。 如果您不想在 PC 上创建本地主机，则很有用。

删除您在那里拥有的所有交叉原点相关代码。 你不会需要它。
在 img html 元素中删除小鸟文件名并只制作 src='#'
添加一个 html input type='file' 标签，并使用它在单击按钮时导入图像。
当您以这种方式获取图像时，在 javascript 中您会将图像传递到 FileReader 中，即 var reader = FileReader; 这是您将图像转换为数据或二进制文件的地方。 CORS 接受数据文件，但 Web 浏览器的“同源”策略可能仍然存在问题，所以...
如果图像文件足够小，请使用 sessionStorage 将文件保存到浏览器存储中。 如果文件大于 2 到 5 MB，只需加倍努力并将其保存到 IndexedDB。 图像的保存和检索速度非常快，值得额外的代码。
现在从存储和“繁荣！”中检索文件您可以随心所欲地使用图像，而不会受到 cors 干扰！ （哦，是的，将其添加到您的 img 标签中以查看）。

既然您正在学习机器学习，我假设您熟悉所有这些 html 和 javascript api。 我广泛使用它来从文件系统操作画布上的图像，这通常是 CORS 的噩梦！ 如果您对一些代码示例感兴趣，请告诉我。

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

问题描述

3 个解决方案

解决方案1
0 2020-09-17 15:57:39

解决方案2
0 2020-09-17 16:08:02

解决方案3
0 2020-09-18 07:40:30

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

问题描述

3 个解决方案

解决方案1 0 2020-09-17 15:57:39

解决方案2 0 2020-09-17 16:08:02

解决方案3 0 2020-09-18 07:40:30

解决方案1
0 2020-09-17 15:57:39

解决方案2
0 2020-09-17 16:08:02

解决方案3
0 2020-09-18 07:40:30