Can not get image from api when using http-proxy-middleware in React.Js

Question

i got cors error and fixed it when using http-proxy-middleware according to video tutorial https://www.youtube.com/watch?v=hxyp_LkKDdk (Skip to solution: 20:08, i have followed and it is like below). everything is fine until i get the picture from the api. Did I miss something?

here's my setupProxy.js

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  
  // GET Image
  app.use(
    "/file/",
    createProxyMiddleware({
      target: "https://.....",
      changeOrigin: true,
    })
  );
};

and user.js

const loadImage = () => {
    setLgShow(true);

    var myHeaders = new Headers();
    myHeaders.append("Authorization", "Bearer abcdefghiklm");
    myHeaders.append("Content-Type", "application/json");

    var requestOptions = {
      method: "GET",
      headers: myHeaders,
      redirect: "follow",
    };
    fetch(`/file/${user.img_front_file_id}`, requestOptions)
      .then((response) => response.text())
      .then((result) => {
        console.log(result);
        imagRef.current = result;
        console.log(JSON.parse(result));
      })
      .catch((error) => console.log("error", error));
  };

and the binary trash (the response when I call API image)

I finally found the answer

const res = await axios({ url: `/file/${user.img_front_file_id}`, method: "GET", headers: { Authorization: "Bearer eFS3oJaQhRU1c5EajQUL", "Content-Type": "application/json", }, responseType: "blob", }); 

const file = new Blob([res.data], { type: "image/jpg" }); 

const url = URL.createObjectURL(file); imagFontRef.current = url;

setFinishFront(true); console.log(res);