React.js使用http-proxy-middleware时无法从API获取图片问题排查

配置http-proxy-middleware解决了CORS报错，其余功能运行正常，但调用API获取图片时出现异常，返回二进制乱码内容，想确认是否存在遗漏配置。

setupProxy.js #

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

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

前端图片请求代码（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));
  };

代理配置本身没有问题，异常是因为原本的请求处理逻辑直接将二进制图片响应用文本格式解析，所以会出现乱码，需要将响应以二进制blob格式处理，再转换为可访问的图片地址。

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);

内容的提问来源于stack exchange，提问作者Four