Face-api.js模型加载报错：304状态却触发JSON解析语法错误

云原生阿岚

2026-6-30

问题

调用face-api.js加载模型时出现报错，执行代码如下：

const loadModels = async () => {
  try {
    await Promise.all([
      faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
      faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
      faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
      faceapi.nets.faceExpressionNet.loadFromUri("/models"),
    ])
      .then((res) => {
        console.log("FaceDetecting");
        faceMyDetect();
      })
      .catch((err) => {
        console.log("errSomething");
        console.log(err);
      });
  } catch (err) {
    console.log(err);
  }
};

收到的报错信息：

errSomething
 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

浏览器网络标签显示四个模型请求均返回304成功状态，但仍触发上述错误。代码所在路径为D:\newLeaf\crowd\src\components\register.js，模型存储路径为D:\newLeaf\crowd\public\models。

问题原因分析

返回内容为HTML而非模型文件：报错中的<!DOCTYPE表明请求返回的是HTML页面（大概率是404错误页）。虽然网络状态显示304，但浏览器可能从缓存中读取了之前失败请求的HTML内容，而非正确的模型文件。
模型文件缺失或路径不匹配：检查public/models目录下是否存在face-api.js所需的全部模型文件（每个模型对应多个文件，例如tiny_face_detector_model-weights_manifest.json、face_landmark_68_model-weights_manifest.json等）。如果文件不全、文件名拼写错误，服务器会返回404页面，被缓存后就会出现304状态但内容错误的情况。
开发服务器路径映射问题：确认开发服务器是否正确将/models路径映射到public/models目录。部分框架（如React）的public目录是静态资源根目录，/models理论上可以正常访问，但如果服务器配置有误，会导致请求路径无法解析到模型文件，最终返回HTML错误页。