向Microsoft Azure Detect API传递Data URI图片遇报错求助

React应用通过摄像头捕获图片并以Data URI格式（示例：data:image/jpeg;base64, iVBOR...）发送到Node.js后端，后端用Axios转发给Microsoft Azure人脸检测API时出现错误。

初始错误 #

error: {
code: 'InvalidImage',
message: 'Decoding error, image format unsupported.'
}

Node.js后端代码 #

app.post('/detect', async (req, res) => {
    const dataUrl = req.body.imageDataUrl;
    if (dataUrl.length === 0) return;

    axios.post(
        url,
        {url: dataUrl},
        {
            timeout: 50000,
            headers: {
                'Ocp-Apim-Subscription-Key': subscriptionKey,
                'Content-Type': 'application/octet-stream',
            },
            params: {
                returnFaceId: false,
                returnFaceLandmarks: false,
                returnFaceAttributes: faceAttributes,
                detectionModel: detectionModel,
            },
        }
    );
});

尝试的Blob转换函数 #

function dataURItoBlob(dataURI) {
    var data = dataURI.split(',')[1];
    var byteString = Buffer.from(data, 'base64');

    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    var blob = new Blob([byteString], {type: mimeString});
    return blob;
};

转换后新错误 #

error: { code: 'InvalidImageSize', message: 'Image size is too small.' }

注：捕获的图片实际尺寸为1280x720，不符合错误提示的“尺寸过小”情况

问题原因分析 #

1. 初始错误根源：请求头设置Content-Type: application/octet-stream（二进制流），但请求体传的是{url: dataUrl}这种JSON格式的参数，两者不匹配，Azure无法解析Data URI为有效图片。
2. Blob转换后错误根源：Node.js环境下原生不支持浏览器的BlobAPI，直接构造的Blob无法被Axios正确处理为二进制数据，导致Azure接收到无效的空/损坏数据，误判为“尺寸过小”。

修复方案 #

方案1：直接传递二进制Buffer（推荐） #

跳过Blob转换，把Data URI解析为Node.js的Buffer后直接作为请求体发送，确保二进制数据和请求头匹配：

app.post('/detect', async (req, res) => {
    const dataUrl = req.body.imageDataUrl;
    if (!dataUrl) return res.status(400).send('缺少图片数据');

    // 解析Data URI的MIME类型和Base64数据
    const [metaPart, base64Data] = dataUrl.split(',');
    const mimeType = metaPart.split(':')[1].split(';')[0];
    const imageBuffer = Buffer.from(base64Data, 'base64');

    try {
        const response = await axios.post(
            url,
            imageBuffer, // 直接传递Buffer作为请求体
            {
                timeout: 50000,
                headers: {
                    'Ocp-Apim-Subscription-Key': subscriptionKey,
                    'Content-Type': mimeType, // 使用图片实际的MIME类型（如image/jpeg）
                },
                params: {
                    returnFaceId: false,
                    returnFaceLandmarks: false,
                    returnFaceAttributes: faceAttributes,
                    detectionModel: detectionModel,
                },
            }
        );
        res.json(response.data);
    } catch (err) {
        res.status(err.response?.status || 500).send(err.response?.data || '请求失败');
    }
});

方案2：使用JSON格式传递Data URI #

如果想通过{url: dataUrl}的方式传递，需要将请求头改为application/json，让Azure识别JSON格式的参数：

app.post('/detect', async (req, res) => {
    const dataUrl = req.body.imageDataUrl;
    if (!dataUrl) return res.status(400).send('缺少图片数据');

    try {
        const response = await axios.post(
            url,
            {url: dataUrl},
            {
                timeout: 50000,
                headers: {
                    'Ocp-Apim-Subscription-Key': subscriptionKey,
                    'Content-Type': 'application/json', // 改为JSON格式
                },
                params: {
                    returnFaceId: false,
                    returnFaceLandmarks: false,
                    returnFaceAttributes: faceAttributes,
                    detectionModel: detectionModel,
                },
            }
        );
        res.json(response.data);
    } catch (err) {
        res.status(err.response?.status || 500).send(err.response?.data || '请求失败');
    }
});

关键注意事项 #

• 请求体格式必须和Content-Type严格对应：二进制数据用图片MIME类型，JSON参数用application/json。
• Node.js中处理二进制数据优先用Buffer，避免使用浏览器的BlobAPI。
• 添加错误捕获逻辑，方便排查转发过程中的问题。

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