Cześć.
Mam funkcję axios na froncie React, która wywołuje API:
export async function detect(imageDataUrl) {
axios
.post(url, dataURItoBlob(imageDataUrl), {
timeout: 50000,
headers: {
'Ocp-Apim-Subscription-Key': subscriptionKey,
'Content-Type': 'application/octet-stream',
},
params: {
overload: 'stream',
returnFaceId: false,
returnFaceLandmarks: false,
returnFaceAttributes: faceAttributes,
detectionModel: detectionModel,
},
})
.then((res) => {
console.log(res);
});
}
, gdzie dataURItoBlob
wygląda tak:
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
}
i wszystko fajnie działa i odpowiedź jest taka, jaką oczekuję.
Jednak kiedy przeniosę operację do Node.js w trosce o bezpieczeństwo o mój klucz API już tak kolorowo nie jest. Z frontu wysyłam POST do backendu Node.js:
axios.post(
`http://localhost:3001/detect`,
{imageDataUrl: imageDataUrl},
{
headers: {'Content-Type': 'application/json'},
}
);
po czym odbieram wysłane dane i wysyłam POST to domyślnego API z tymi danymi:
app.post('/detect', async (req, res) => {
const imageDataUrl = req.body.imageDataUrl;
const imageBlob = dataURItoBlob(imageDataUrl);
axios
.post(url, imageBlob, {
timeout: 50000,
headers: {
'Ocp-Apim-Subscription-Key': subscriptionKey,
'Content-Type': 'application/octet-stream',
},
params: {
overload: 'stream',
returnFaceId: false,
returnFaceLandmarks: false,
returnFaceAttributes: faceAttributes,
detectionModel: detectionModel,
},
})
.then((res) => {
console.log(res);
});
});
jednak API zwraca mi błąd Decoding error, image format unsupported.
. Możliwe, że problem występuje przez nieco inną implementację funkcji dataURItoBlob
, bo w Node.js, aby stworzyć Blob trzeba to zaimportować.
const {Blob} = require('node:buffer');
exports.dataURItoBlob = function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], {type: mimeString});
};
Dodam jeszcze, że w obu przypadkach imageDataUrl
jest stringiem w formacie Data url np. (data:image/jpeg;base64,iVBORw0KG...)