I am trying to send a blob (will be a file from another API in future) as the response for a api call in next13 api routes. My handler goes like:

export default async function handler(req, res) {
  const endpoint = `${process.env.UI_ENGINE}/docs/${req.query.id}/download-doc`;

  
    const response = await fetch(endpoint, {
       headers: { Authorization: `${req.headers.authorization}` },
    });

    const blob = await response.blob();
 

    console.log("»»»»»» [DEBUG : blob ] -- :", blob); // Blob { size: 1545, type: 'application/json' }

    res.status(response.status).send(blob);
}

I am calling this api from my component like:

const fetchWithToken = async (service, token) => {
// data fetch function in UI.
    const response = await fetch(`${process.env.basePath}/${service}`, {
      headers: { Authorization: `Bearer ${token}` },
    });

    const blob = await response.blob();

    console.log("»»»»»» [DEBUG : response ] --  :", blob); // Blob {size: 2, type: 'application/json'}

// download as file logic ....
}

as you can see the blob in ui data fetch response gives a blob size of 2 (content will be an empty object) even if the expected size is bigger.

I tried to convert the blob to a readable stream and send it back to the ui from next api. also tried to make use of File(). both idea failed.
I was able to convert the blob to text in api (blob.text()) and send it as the response; but it will work only for json,csv,etc… files. But the scope is wide.

I am using
nextjs – 13.5.4
node – 18.17.1.

I would prefer to send the file from UI_ENGINE to frontend directly. Please help me to find the best solution. thanks in advance…