为何从同一响应对象设置两个状态时出现S3 403禁止错误？

问题描述 #

我的Node.js服务负责与S3通信，客户端会收到该服务返回的S3签名URL响应。我需要用这个签名URL从前端直接上传图片到S3，同时用去掉签名参数的图片URL从S3存储桶展示图片。但当我尝试从同一个响应对象里设置两个不同状态时，总会触发403（禁止访问）错误。单独设置其中一个状态时一切正常，只要同时设置两个就会出问题。

相关代码：

useEffect(() => {
  async function getURL() {
    try {
      await axios.get("imageRouter/S3Url").then((response) => {
        setImageUrl(response.data.url.split("?")[0]);
        setSignedUrl(response.data.url);
      });
    } catch (error) {
      console.log(error);
    }
  }
  getURL();
}, [selectedFile]);

核心原因 #

1. 签名URL权限不匹配：你当前获取的签名URL是用于**上传（PUT请求）**的，它的权限仅允许执行上传操作，无法直接用于读取（GET请求，即展示图片）。当你用去掉签名参数的裸URL访问S3对象时，因为桶对象没有公开读取权限，且没有携带有效签名，自然会返回403。
2. 状态更新触发重复请求：同时设置两个状态会导致组件重新渲染，useEffect因selectedFile依赖再次执行，重复请求签名URL。而S3签名URL通常是一次性或有时间/次数限制的，重复使用失效的签名URL也会触发403。

解决方案 #

方案1：服务端返回双签名URL（推荐）

让Node.js服务同时生成上传专用签名URL（PUT权限）和读取专用签名URL（GET权限），前端分别使用对应URL完成上传和展示：

• 服务端示例（Node.js）：

// 生成上传用签名URL（PUT）
const uploadSignedUrl = s3.getSignedUrl('putObject', {
  Bucket: 'your-bucket-name',
  Key: 'object-key',
  Expires: 3600 // 有效期1小时
});

// 生成读取用签名URL（GET）
const readSignedUrl = s3.getSignedUrl('getObject', {
  Bucket: 'your-bucket-name',
  Key: 'object-key',
  Expires: 3600
});

res.json({ uploadUrl: uploadSignedUrl, readUrl: readSignedUrl });

• 前端代码修改：

useEffect(() => {
  async function getURL() {
    try {
      const response = await axios.get("imageRouter/S3Url");
      setImageUrl(response.data.readUrl); // 用读取签名URL展示图片
      setSignedUrl(response.data.uploadUrl); // 用上传签名URL完成上传
    } catch (error) {
      console.log(error);
    }
  }
  getURL();
}, [selectedFile]);

方案2：上传后修改对象ACL（谨慎使用）

如果业务允许公开访问图片，可在上传完成后修改S3对象的ACL为公开可读，这样裸URL就能直接访问：

• 前端上传完成后，调用服务端接口修改ACL：

// 上传完成后请求服务端修改ACL
await axios.post("imageRouter/updateObjectAcl", { key: 'object-key' });

• 服务端处理：

s3.putObjectAcl({
  Bucket: 'your-bucket-name',
  Key: 'object-key',
  ACL: 'public-read'
}, (err) => {
  if (err) console.error(err);
});

方案3：避免重复请求签名URL

添加状态判断，避免组件重绘时重复请求失效的签名URL：

const [isUrlFetched, setIsUrlFetched] = useState(false);

useEffect(() => {
  async function getURL() {
    if (isUrlFetched) return;
    try {
      const response = await axios.get("imageRouter/S3Url");
      setImageUrl(response.data.readUrl);
      setSignedUrl(response.data.uploadUrl);
      setIsUrlFetched(true);
    } catch (error) {
      console.log(error);
    }
  }
  getURL();
}, [selectedFile, isUrlFetched]);

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