silkimen / cordova-plugin-advanced-http

Cordova / Phonegap plugin for communicating with HTTP servers. Allows for SSL pinning!
MIT License
391 stars 313 forks source link

HttpResponseType blob type empty data, even though the request is successful #517

Open JeetuChoudhary opened 9 months ago

JeetuChoudhary commented 9 months ago

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 HTTP plugin, the response I receive is empty. Here is the response returned from the Angular 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;