CompreFace JavaScript SDK React应用x-api-key缺失报错求助

我用Visual Studio Code开发基于CompreFace JavaScript SDK的摄像头React应用，执行npm start后Chrome页面弹出并启动视频，但点击“Start video”按钮后，开发者工具出现如下报错：

"message" : "Missing header: x-api-key",
"code" : 20

目前摄像头已正常启动，但无法连接本地主机的CompreFace服务，面部识别的绿色框也无法加载。我已按照GitHub上的教程完成CompreFace的安装，完整App.js代码如下：

import { useRef } from 'react'
import { CompreFace } from '@exadel/compreface-js-sdk';
import './App.css';

function App() {
  const videoTag = useRef(null);
  const canvas1 = useRef(null);
  const canvas2 = useRef(null);
  const canvas3 = useRef(null);

  const drawFace = (canvasElement, faceData, extraCanvas) => {
    const evt = new Event("next_frame", {"bubbles":true, "cancelable":false});
    document.dispatchEvent(evt);
    let box = faceData.result[0].box;

    canvasElement.clearRect(0, 0, 640, 480);
    extraCanvas.clearRect(0, 0, 640, 480);

    canvasElement.strokeStyle = 'green';
    extraCanvas.strokeStyle = "blue";
    extraCanvas.fillStyle = "white"

    extraCanvas.lineWidth = 5;
    canvasElement.lineWidth = 5;
    
    canvasElement.strokeRect(box.x_min, box.y_min, box.x_max - box.x_min, box.y_max - box.y_min);
    extraCanvas.fillText( Number.parseFloat(box.probability).toPrecision(5) + '  ' + faceData.result[0].gender.value + '  ' + faceData.result[0].age.low + '-' + faceData.result[0].age.high, box.x_min, box.y_min - 10)

  }
  
  const handleVideoStart = () => {
    navigator.mediaDevices.getUserMedia({ video: true})
      .then(stream => videoTag.current.srcObject = stream)
      .catch( error => console.error(error) )

      videoTag.current.addEventListener('play', () => {
        // CompreFace init
        let server = "http://localhost";
        let port = 8000;
        let detection_key = "0548e3c5-fa91-4a82-aca4-4c6b56a69ffd";
  
        let core = new CompreFace(server, port);
        let detection_service = core.initFaceDetectionService(detection_key);
        // end of CompreFace init
  
        let ctx1 = canvas1.current.getContext('2d');
        let ctx2 = canvas2.current.getContext('2d');
        let ctx3 = canvas3.current.getContext("2d");

        document.addEventListener('next_frame', () => {
          ctx1.drawImage(videoTag.current, 0, 0, 640, 480)
          canvas1.current.toBlob( blob => {
            detection_service.detect(blob, {  limit: 1, face_plugins: 'age,gender' })
              .then(res => {
                drawFace(ctx2, res, ctx3)
              })
              .catch(error => console.log(error))
          }, 'image/jpeg', 0.95)
        })

        const evt = new Event("next_frame", {"bubbles":true, "cancelable":false});
              document.dispatchEvent(evt);
      })
  } 

  return (
    <div className="App">
      <header className="App-header">
        <video ref={videoTag} width="640" height="480" autoPlay muted ></video>
        <canvas ref={canvas1} width="640" id="canvas" height="480" style={{ display: 'none' }}></canvas>
          <canvas ref={canvas2} width="640" id="canvas2" height="480" style={{ position: 'absolute' }} ></canvas>
        <canvas ref={canvas3} width="640" height="480" style={{ position: 'absolute' }}></canvas>

        <div>
          <button onClick={handleVideoStart} >Start video</button>
        </div>

      </header>
    </div>
  );
}

export default App;

问题排查与修复方案 #

1. 修正SDK初始化参数顺序 #

报错核心是API Key未被正确传入请求头，大概率是initFaceDetectionService的参数顺序错误。部分版本的CompreFace JS SDK中，该方法第一个参数是服务名称（默认值为'detection'），第二个才是API Key。

修改初始化代码：

// 原代码
let detection_service = core.initFaceDetectionService(detection_key);
// 修改为
let detection_service = core.initFaceDetectionService('detection', detection_key);

2. 验证API Key有效性 #

确认detection_key是CompreFace控制台中Face Detection服务的有效Key：

• 访问http://localhost:8000登录CompreFace管理界面
• 进入Services列表，找到Face Detection服务，核对API Key是否与代码中一致
• 若Key错误或服务未创建，重新生成/创建对应服务的API Key

3. 配置CORS允许跨域请求 #

CompreFace默认可能不允许React应用（通常运行在3000端口）的跨域请求，导致请求头无法正常传递。启动CompreFace时添加CORS配置（以Docker为例）：

docker run -p 8000:8000 -e COMPREFACE_CORS_ALLOWED_ORIGINS="http://localhost:3000" exadel/compreface:latest

4. 同步SDK与服务版本 #

确保@exadel/compreface-js-sdk版本与CompreFace服务版本匹配，执行命令更新到最新版：

npm install @exadel/compreface-js-sdk@latest

调试建议 #

• 打开浏览器Network面板，查看发送到http://localhost:8000/api/v1/detection/detect的请求，检查Request Headers中是否包含x-api-key字段及对应值
• 在代码中添加console.log(detection_service)，打印服务实例配置，确认API Key已正确注入

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