React-three-fiber突发CORS错误致应用崩溃，求排查与解决

可能原因 #

• 依赖库隐式请求：react-three-fiber的常用依赖（如@react-three/drei）中的组件（比如Environment），在未显式指定环境贴图时，会默认加载DigitalOcean Spaces上的示例HDR资源，这就是你看到的请求来源。
• 依赖版本自动更新：即使你没修改代码，若package.json中依赖使用了^这类范围版本号，包管理器可能自动拉取了新版本的依赖，新版本改变了默认行为，触发了该资源请求。
• CDN CORS配置变更：之前该HDR资源的CDN可能配置了允许localhost:5173的CORS头，现在配置失效或被修改，导致跨域拦截。

可行解决方案 #

1. 显式指定环境贴图 #

如果使用了@react-three/drei的Environment组件，手动指定自己的环境资源（本地文件或已配置CORS的CDN资源），覆盖默认行为：

import { Environment } from '@react-three/drei';

function AppScene() {
  return (
    <>
      {/* 使用本地HDR资源 */}
      <Environment files="/assets/your-custom.hdr" />
      {/* 或使用drei内置的预设环境图（无需外部请求） */}
      {/* <Environment preset="warehouse" /> */}
    </>
  );
}

2. 锁定依赖版本 #

检查package.json中react-three-fiber、@react-three/drei、three等核心依赖的版本号，将范围版本（如^9.92.0）改为固定版本（如9.92.0），然后重新安装依赖：

# npm
npm install
# yarn
yarn install
# pnpm
pnpm install

这样可以避免依赖自动更新带来的行为变化。

3. 开发环境配置Vite代理 #

在vite.config.js中添加代理规则，将对该HDR资源的请求转发到目标CDN，绕过CORS限制：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/market-assets': {
        target: 'https://market-assets.fra1.cdn.digitaloceanspaces.com',
        changeOrigin: true,
        secure: false
      }
    }
  }
});

4. 关闭默认环境加载 #

部分组件支持关闭默认环境图加载，比如检查是否有类似disableDefaultEnvironment的props，显式禁用：

<Canvas disableDefaultEnvironment>
  {/* 你的场景内容 */}
</Canvas>

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