Tauri应用拖拽带独立纹理的GLTF文件时遇CORS问题

核心原因 #

GLB是单文件格式，所有纹理、缓冲区数据都嵌入其中，加载时无需额外请求外部资源；而GLTF是JSON格式，需要加载独立的.bin缓冲区文件和纹理文件，这些文件通过file://协议访问时，Tauri基于的webview浏览器内核会因为同源策略限制触发CORS错误，即使是本地文件也不例外。

解决方案 #

1. 通过Tauri FS API读取资源并转换为可加载格式 #

利用Tauri的文件系统API读取本地依赖资源，转换为Blob后生成临时URL提供给Three.js加载，绕开file://协议的CORS限制。示例代码：

import { readBinaryFile } from '@tauri-apps/api/fs';
import { join } from '@tauri-apps/api/path';
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// 获取拖拽的GLTF文件所在目录
const gltfDir = await join(droppedGltfPath, '..');

const loadingManager = new THREE.LoadingManager();
loadingManager.setURLModifier(async (relativeUrl) => {
  // 拼接依赖资源的绝对路径
  const absolutePath = await join(gltfDir, relativeUrl);
  // 读取二进制文件
  const fileBuffer = await readBinaryFile(absolutePath);
  // 转换为Blob并生成临时URL
  const blob = new Blob([fileBuffer]);
  return URL.createObjectURL(blob);
});

const gltfLoader = new GLTFLoader(loadingManager);
gltfLoader.load(droppedGltfPath, (gltf) => {
  // 处理加载后的模型
});

2. 配置Tauri允许本地文件CORS访问 #

在tauri.conf.json的security字段中添加CORS允许列表，放宽对本地文件的限制：

{
  "tauri": {
    "security": {
      "cors": {
        "allowlist": ["file:///**"]
      },
      "assetProtocol": {
        "allowlist": ["*"]
      }
    }
  }
}

注意：这种方式依赖浏览器内核兼容性，部分场景下可能仍会触发限制，优先推荐第一种方案。

3. 临时替代：将GLTF转为GLB格式 #

如果需要快速解决问题，可将GLTF及其依赖资源打包为GLB单文件（可使用Blender、gltf-pipeline等工具转换），GLB加载时无跨域问题。

内容的提问来源于stack exchange，提问作者Sushant S Samuel