I have an API endpoint that serves an image with the following response headers:
Server: Apache/2.4.18 (Ubuntu)
X-Powered-By: Express
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Content-Type: image/jpeg
Content-Length: 445414
When I access this API endpoint using the browser or Insomnia, it correctly displays the image. However, when I try to fetch this image in my Ionic Angular app using @awesome-cordova-plugins/http, the response I receive is empty. Here is the response returned from the HTTP call:
{
"status": 200,
"headers": {
"content-length": "445414",
"server": "Apache/2.4.18 (Ubuntu)",
"x-android-selected-protocol": "http/1.1",
"x-android-response-source": "NETWORK 200",
"access-control-allow-origin": "*",
"keep-alive": "timeout=5, max=100",
"x-powered-by": "Express",
"connection": "Keep-Alive",
"content-type": "image/jpeg",
"accept-ranges": "bytes",
"cache-control": "public, max-age=0"
},
"data": {}
}
Where data should contain the blob which I need to convert into base64. It was working previously.
Here is the Angular code used to fetch it:
const reqOptions: any = {
method: "get",
responseType: "blob",
};
const res: HTTPResponse = await this.http.sendRequest(url, reqOptions);
const convertBlobToBase64 = (blob: Blob) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onerror = reject;
reader.onload = () => {
resolve(reader.result);
};
reader.readAsDataURL(blob);
});
const base64Data = (await convertBlobToBase64(blob)) as string;
Any suggestions?
2
Answers
I have resolved the issue by changing the Cordova plugin with the capacitor plugin. It was Cordova plugin causing the issue.
You specified responseType: "blob", but the returned data field is an empty object, which seems like it’s not interpreting the response as a blob. Try to use "text" or "arraybuffer" instead.
If that doesn’t work, try if it works via Postman.