S3预签名URL浏览器可访问，React应用请求返回403错误排查

问题原因 #

S3预签名URL的签名逻辑与请求头、请求参数强绑定，当React Image组件发起的请求头和生成预签名时的预期头不一致时，S3会拒绝请求并返回403。浏览器直接访问时的请求头与组件发起的请求头存在差异，这是导致问题的核心原因。

解决方案 #

1. 生成预签名时指定匹配的请求头 #

生成预签名URL时，明确指定Image组件会发送的请求头（比如Accept），确保实际请求的头与签名时的头完全一致。以AWS SDK v3为例：

import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
import { getSignedUrl } from "@aws-sdk/s3-request-presigner";

const s3Client = new S3Client({ region: "你的存储桶区域" });
const command = new GetObjectCommand({
  Bucket: "你的存储桶名称",
  Key: "GIF文件的存储路径",
  // 指定与Image组件请求匹配的头，比如Accept
  Accept: "image/gif,image/*"
});
// 生成有效期12小时的预签名URL
const presignedUrl = await getSignedUrl(s3Client, command, { expiresIn: 43200 });

2. 关闭Next.js Image组件的自动优化（如果使用Next.js） #

Next.js的<Image>组件默认会做图片格式转换、压缩等优化，这会修改请求参数和头，导致预签名验证失败。可以通过unoptimized={true}关闭优化：

<Image src={presignedUrl} alt="GIF内容" unoptimized={true} />

3. 通过Fetch获取Blob再生成本地URL #

如果无法修改预签名生成逻辑，可以手动用Fetch请求图片，控制请求头匹配预签名要求，再将Blob转换为本地Object URL给图片标签使用：

import { useState, useEffect } from 'react';

function S3GifViewer({ presignedUrl }) {
  const [localImageUrl, setLocalImageUrl] = useState(null);

  useEffect(() => {
    let isMounted = true;
    const fetchAndPrepareImage = async () => {
      try {
        const response = await fetch(presignedUrl, {
          headers: {
            // 添加与预签名匹配的请求头
            'Accept': 'image/gif'
          }
        });
        if (!response.ok) throw new Error('图片请求失败');
        const blob = await response.blob();
        const url = URL.createObjectURL(blob);
        if (isMounted) setLocalImageUrl(url);
        // 组件卸载时释放本地URL
        return () => URL.revokeObjectURL(url);
      } catch (err) {
        console.error(err);
      }
    };
    fetchAndPrepareImage();
    return () => { isMounted = false; };
  }, [presignedUrl]);

  if (!localImageUrl) return <div>加载中...</div>;
  return <img src={localImageUrl} alt="GIF" />;
}

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