React集成onnxruntime-web遇后端加载错误求助

错误核心原因 #

你遇到的问题根源有两点：

• 模型路径错误：相对路径./model.onnx被webpack错误解析，导致请求返回的是HTML文件而非模型文件，onnxruntime把HTML当成Wasm文件解析，触发magic word校验失败，进而导致所有后端初始化失败。
• Wasm资源加载路径未适配CRA逻辑：onnxruntime-web依赖的Wasm文件需要正确指向才能完成后端初始化。

具体解决方案 #

1. 修正模型文件存放与访问路径

将model.onnx仅放在public文件夹中（无需放入src目录），代码中使用绝对路径/model.onnx访问：

import * as ort from 'onnxruntime-web';
import { useEffect } from 'react';

function App() {
  async function loadModel() {
    // 指定Wasm加载路径并使用绝对路径加载模型
    const session = await ort.InferenceSession.create('/model.onnx', {
      executionProviders: ['wasm'],
      wasm: {
        // 用CDN加载Wasm资源，适配CRA打包逻辑
        path: 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.16.3/dist/'
      }
    });
    console.log('模型加载成功:', session);
  }

  // 用useEffect确保模型只加载一次，并捕获错误
  useEffect(() => {
    loadModel().catch(err => console.error('模型加载失败:', err));
  }, []);

  return (
    <div className="ModelCanvas">
      Here, do stuff with the onnx model
    </div>
  );
}

export default App;

2. 本地加载Wasm资源（可选）

如果不想依赖CDN，手动复制Wasm资源到public目录：

• 从node_modules/onnxruntime-web/dist中复制ort-wasm.wasm、ort-wasm-simd.wasm（若需SIMD支持）到public/wasm文件夹
• 修改配置指向本地路径：

const session = await ort.InferenceSession.create('/model.onnx', {
  executionProviders: ['wasm'],
  wasm: {
    path: `${process.env.PUBLIC_URL}/wasm/`
  }
});

3. 避免重复加载模型

原代码中直接在组件函数内调用loadModel()会导致组件每次渲染都重复加载模型，用useEffect包裹并设置空依赖数组，确保模型仅初始化一次。

关键说明 #

• CRA的public文件夹是静态资源根目录，只有这里的文件能通过绝对路径直接访问；src目录下的文件会被webpack模块化处理，无法直接作为静态资源请求。
• 错误信息里的found 3c 21 44 4f是HTML起始字符<!DO的十六进制编码，说明请求返回的是index.html而非模型文件，这是路径错误的典型表现。

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