点击粉色按钮向ml5.js分类器添加图片触发CORS警告问题排查

嘿，我来帮你拆解这个CORS警告的问题，以及对应的解决办法～

首先，咱们得搞清楚为什么会出现这个警告：你现在是直接通过本地文件系统（file://协议）打开HTML文件的，浏览器对于file://协议下的资源有严格的安全限制——ml5的MobileNet在处理图片时需要读取图片像素数据，而file://协议下浏览器会阻止这种跨域性质的操作，哪怕图片是本地的也不行。

你之前尝试设置image1.crossOrigin = 'anonymous'没用，是因为这个属性只对HTTP/HTTPS协议下的跨域请求生效，对于file://协议的本地资源，浏览器根本不会发送跨域请求头，所以这个设置完全起不到作用。

接下来给你几个可行的解决办法，按推荐程度排序：

1. 用本地HTTP服务器运行你的项目（最推荐） #

ml5.js的很多功能本身就依赖HTTP环境，把项目放在本地服务器上运行，不仅能解决CORS问题，还能避免其他本地文件运行时的潜在bug。

这里给你几个简单的搭建方式：

• Node.js + http-server：先全局安装http-server，打开终端运行npm install -g http-server，然后进入你的项目根目录，运行http-server，之后在浏览器访问http://localhost:8080就能打开你的页面了。
• Python内置服务器：如果你有Python环境，Python3直接在项目根目录运行python -m http.server，Python2运行python -m SimpleHTTPServer，然后访问对应的localhost地址（默认是http://localhost:8000）。
• VS Code Live Server插件：如果你用VS Code，安装Live Server插件后，右键你的HTML文件，选择「Open with Live Server」，它会自动帮你启动本地服务器并打开页面。

2. 临时调整浏览器安全设置（仅用于开发测试） #

这个方法是绕过浏览器的CORS限制，只适合你自己开发测试用，绝对不能用于生产环境，因为会降低浏览器的安全性。

以Chrome为例，操作步骤：

1. 关闭所有Chrome窗口
2. 用命令行启动Chrome：
   • Windows：打开命令提示符，输入chrome.exe --disable-web-security --user-data-dir="C:/ChromeDevSession"
   • Mac：打开终端，输入open -a Google\ Chrome --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"
   • Linux：打开终端，输入google-chrome --disable-web-security --user-data-dir="/tmp/ChromeDevSession"

3. 优化代码确保图片加载完成后再添加（可选补充） #

即使解决了CORS问题，有时候也会因为图片还没加载完成就调用classifier.addImage导致异常，你可以给代码加个图片加载完成的判断：

pinkButton.mousePressed(function(){
  const addImagesToClassifier = () => {
    classifier.addImage(image1, 'pink')
    classifier.addImage(image2, 'pink')
    classifier.addImage(image3, 'pink')
    console.log('CLASSIFER', classifier)
  }

  image1 = document.querySelector(".pink1")
  image2 = document.querySelector(".pink2")
  image3 = document.querySelector(".pink3")

  // 检查所有图片是否已经加载完成
  const allImagesLoaded = [image1, image2, image3].every(img => img.complete && img.naturalHeight !== 0)
  
  if (allImagesLoaded) {
    addImagesToClassifier()
  } else {
    let loadedCount = 0
    const handleImageLoad = () => {
      loadedCount++
      if (loadedCount === 3) {
        addImagesToClassifier()
      }
    }
    // 给每个图片绑定加载完成事件
    image1.addEventListener('load', handleImageLoad)
    image2.addEventListener('load', handleImageLoad)
    image3.addEventListener('load', handleImageLoad)
  }
})

另外，在HTTP环境下，你也可以直接在HTML的img标签上添加crossorigin="anonymous"属性，提前声明跨域权限：

<img src="./images/pink/1.png" class="pink1" alt="pink1" crossorigin="anonymous">
<img src="./images/pink/2.png" class="pink2" alt="pink2" crossorigin="anonymous">
<img src="./images/pink/3.png" class="pink3" alt="pink3" crossorigin="anonymous">

内容的提问来源于stack exchange，提问作者user13067694