React.js中如何展示从API获取的需鉴权二进制图片？

直接修复当前问题 #

你通过URL.createObjectURL()生成的地址是绑定当前页面会话的临时地址，不能直接复制到新标签页打开，你需要将该地址赋值给<img>标签的src属性才能正常展示。

React组件实现示例：

import { useState, useEffect } from 'react';

// 鉴权图片组件
const AuthImage = ({ imageUrl, token }: { imageUrl: string; token: string }) => {
  const [imgSrc, setImgSrc] = useState<string>('');

  useEffect(() => {
    let tempUrl: string;
    const fetchAuthImage = async () => {
      try {
        const response = await fetch(imageUrl, {
          headers: {
            Authorization: token
          }
        });
        if (!response.ok) throw new Error('图片请求失败');
        const imageBlob = await response.blob();
        // 生成临时地址
        tempUrl = URL.createObjectURL(imageBlob);
        setImgSrc(tempUrl);
      } catch (error) {
        console.error('图片加载失败:', error);
      }
    };

    fetchAuthImage();
    // 组件卸载时释放临时地址，避免内存泄漏
    return () => tempUrl && URL.revokeObjectURL(tempUrl);
  }, [imageUrl, token]);

  return imgSrc ? <img src={imgSrc} alt="受保护的资源" /> : <span>加载中...</span>;
};

后端配置校验 #

如果上述代码仍无法正常展示图片，检查后端两个配置项：

• 跨域配置需要允许Authorization请求头，Express的cors配置示例：

const cors = require('cors');
app.use(cors({
  origin: '你的前端服务地址',
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization']
}));

• 图片响应需要返回正确的Content-Type头，如果你使用express.static托管静态资源默认会自动处理，如果是手动读取文件返回，需要根据图片格式手动设置res.type('jpeg')/res.type('png')等，不要返回application/json类型。

更简洁的替代方案 #

你可以直接将鉴权凭证存入HttpOnly Cookie，后端鉴权中间件直接读取Cookie校验。此时不需要手动处理fetch和Blob转换，直接将图片地址写入<img>的src属性即可，浏览器会自动携带同域Cookie发起请求，代码会更简洁。

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