如何解决本地HTML中Three.js加载纹理的CORS跨域问题？

问题根源 #

直接通过file://协议打开本地HTML文件时，浏览器会将页面的origin设为null，而浏览器的CORS政策禁止这种源发起跨域请求（包括加载本地图片或远程HTTPS图片），因此触发错误。

可行解决方案 #

1. 启动本地开发服务器（推荐） #

这是最安全且通用的方法，用HTTP协议访问本地文件：

• Python：在项目文件夹打开终端，运行对应命令：
  • Python 3：python -m http.server 8000
  • Python 2：python -m SimpleHTTPServer 8000
• 启动后在浏览器访问http://localhost:8000，打开你的HTML文件即可正常加载纹理。

2. 临时调整浏览器CORS设置（仅用于本地测试） #

注意：该方法会降低浏览器安全性，仅适合临时测试，测试完成后务必恢复设置：

• Chrome：右键Chrome快捷方式，在「目标」栏末尾添加（注意前面加空格）：
  --disable-web-security --user-data-dir="C:/ChromeDevSession"
  启动浏览器后即可加载本地文件的纹理。
• Firefox：在地址栏输入about:config，搜索security.fileuri.strict_origin_policy，将其值设为false。

3. 将图片转为Data URI嵌入代码 #

把图片转换成base64编码的Data URI，直接写在代码里，无需外部文件请求：

const geometry = new THREE.SphereGeometry(5, 32, 32);
const textureLoader = new THREE.TextureLoader();
// 替换为你的图片base64编码
const texture = textureLoader.load('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAAAAAAAD/...');
const material = new THREE.MeshBasicMaterial({ map: texture });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

代码小修正 #

你提供的代码里存在变量名错误：const sphere = new THREE.Mesh(geometry, material);中的material应该是cargaTextura，否则会导致运行报错。

内容的提问来源于stack exchange，提问作者Miguel Angel Amorín sosa