为EC2绑定含S3FullAccess策略的IAM角色后，React前端无法上传文件

React前端代码在用户浏览器中执行，EC2绑定的IAM角色权限仅作用于EC2实例上运行的服务器端进程——前端代码无法直接获取该IAM角色的身份凭证。之前用环境变量配置访问密钥的方式，本质是把密钥打包进了前端静态资源（这也是该方式不安全的原因），浏览器能拿到密钥完成请求签名；换成IAM角色后，前端没有合法凭证发起S3请求，因此上传流程无法启动。

方案1：通过EC2后端代理上传（推荐，管控性更强） #

• 在EC2实例上搭建轻量后端接口（如Node.js、Python Flask等），前端将文件发送至该接口
• 后端接口利用EC2绑定的IAM角色权限（AWS SDK会自动从实例元数据服务获取凭证）完成S3上传操作
• 全程由后端管控S3访问，前端无需接触任何AWS凭证，安全性更高

方案2：使用S3预签名URL直接上传 #

若希望前端直接与S3交互，可采用预签名URL机制：

• 后端通过IAM角色权限生成带有效期的预签名URL（包含上传权限），返回给前端
• 前端拿到URL后，直接发起PUT请求上传文件，无需携带任何凭证
• 后端代码示例（Node.js）：

const AWS = require('aws-sdk');
const s3 = new AWS.S3();

async function getPresignedUploadUrl(bucketName, fileName) {
  const params = {
    Bucket: bucketName,
    Key: fileName,
    Expires: 3600 // URL有效期1小时
  };
  return s3.getSignedUrlPromise('putObject', params);
}

• 必须配置S3桶的CORS规则，允许前端域名的PUT请求，示例配置：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://your-frontend-domain.com</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

常见误区排查 #

• 不要尝试让前端访问EC2实例元数据服务（http://169.254.169.254），该地址仅能在EC2内部访问，浏览器无法请求
• 确认EC2的IAM角色信任策略正确（允许ec2.amazonaws.com扮演该角色），且策略包含S3上传所需权限（无需过度授权，s3:PutObject即可满足上传需求）

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