使用three.js的ColladaLoader加载GitLab远程.dae文件报错求助

问题详情 #

本地开发时，使用Three.js的ColladaLoader读取本地.dae文件完全正常，但切换到加载GitLab上的远程.dae文件时，触发onErrorCallback，错误信息为TypeError: Failed to fetch。

代码片段 #

let loaderDae = new ColladaLoader();
   
loaderDae.load(`https://gitlab.com/po_developer/high-precision-3d-graphics-of-traditional-buildings/-/raw/master/95b69c0c-fd25-4bcf-a606-64d6619250a6/untitled.dae`, (dae: any) => {
   console.log('read successfully, something')
}, this.onProgressCallback, this.onErrorCallback)

onProgressCallback(e){
    console.log('onProgressCallback');
    console.log(e);
}
onErrorCallback(e){
    console.log('onErrorCallback');
    console.log(e);
}

错误栈信息 #

onErrorCallback
architecture3-d-inner.component.ts:386 TypeError: Failed to fetch
    at zone-evergreen.js:1068:1
    at FileLoader.load (three.module.js:39449:1)
    at ColladaLoader.load (ColladaLoader.js:62:1)
    at architecture3-d-inner.component.ts:333:22
    at Array.forEach (<anonymous>)
    at Architecture3DInnerComponent.loaderData (architecture3-d-inner.component.ts:328:32)
    at SafeSubscriber._next (architecture3-d-inner.component.ts:165:14)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:1)
    at SafeSubscriber.next (Subscriber.js:122:1)
    at Subscriber._next (Subscriber.js:72:1)

排查与解决办法 #

1. 优先排查CORS跨域问题 #

浏览器的同源策略会拦截跨域资源请求，GitLab的raw文件链接默认不会给所有域名开放CORS权限，这是最常见的原因。

• 解决方式：
  • 后端代理：在你的服务端搭建代理，由后端请求GitLab的文件后再返回给前端。比如用Angular的proxy.conf.json配置代理，或者Node.js的http-proxy-middleware实现转发。
  • 静态资源托管中转：将DAE文件迁移到支持CORS的静态资源服务（如GitHub Pages、阿里云OSS等），从这些服务的地址加载文件。

2. 检查文件访问权限 #

如果目标GitLab仓库是私有仓库，或者文件未设置公开访问权限，请求会被拒绝。

• 解决方式：
  • 确认仓库为公开状态；如果是私有仓库，生成GitLab个人访问令牌，在请求链接中携带令牌参数（格式类似https://gitlab.com/xxx/raw/master/xxx.dae?private_token=你的令牌）。

3. 验证链接有效性 #

GitLab的raw链接可能因分支变更、文件路径修改而失效。

• 解决方式：
  • 直接在浏览器中打开该链接，检查是否能正常下载文件。如果无法打开，重新获取正确的raw文件地址。

4. 排除网络与缓存问题 #

• 解决方式：
  • 清除浏览器缓存，或使用无痕模式重新测试；
  • 确认当前网络可正常访问GitLab，排除网络拦截或DNS问题。

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