如何通过Axios PUT方法为S3对象设置自定义元数据？

我开发了一个简易Web应用，允许用户上传照片到S3存储桶并附带自定义元数据（比如给男性照片加标签brother）。现在用带S3代理的API Gateway，文件能成功传到存储桶，但自定义元数据始终加不上。我已经在请求头里用x-amz-meta-格式添加了元数据，控制台也能看到请求头里有这个字段，但S3里就是没有。上传函数代码如下：

function upload() {
  var path = (document.getElementById("uploaded_file").value).split("\");
    console.log("Here is the path: ", path);

    customLabels = document.getElementById("custom_labels").value;
    console.log("Here are the custom labels: ", customLabels);

    var file_name = path[path.length - 1];
    console.log("The file name is: ", file_name);

    var file = document.getElementById("uploaded_file").files[0];
    console.log("Here is the file: ", file);
    console.log("Size of customLabels?", customLabels.length);
    
    if (customLabels.length != 0) {
            var headers = {
                    'Content-Type': file.type,
                    'x-amz-meta-customlabels': customLabels
            };
    } else {
            var headers = {
                    'Content-Type': file.type,
            };
    };

    console.log("The headers are: ", headers);

    url = "my apig gateway url" + file.name;

    axios.put(url, file, { headers: headers }).then(response => {
        console.log(response)
        alert("Image uploaded: " + file.name);
    }).catch(function(result) {
        console.log("result", result);
    });
}

问题排查与解决步骤 #

1. 配置API Gateway请求头映射
   API Gateway默认不会自动转发所有请求头到S3，必须手动配置映射规则：

• 进入API Gateway的对应API，找到集成请求设置
• 在「HTTP头」区域，添加映射项：
  • 源：method.request.header.x-amz-meta-customlabels
  • 目标：x-amz-meta-customlabels
• 若有多个自定义元数据，可勾选「将所有请求头转发到集成」（需注意不必要的头会增加请求体积）

2. 验证CORS配置（跨域场景）
   如果前端页面与API Gateway域名不同，需确保CORS规则允许自定义头：

• 在API Gateway的CORS设置中，Access-Control-Allow-Headers字段必须包含x-amz-meta-customlabels，否则浏览器会拦截该请求头

3. 检查IAM角色权限
   确保API Gateway关联的IAM角色拥有完整的PutObject权限，且策略中未限制元数据传递：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": "s3:PutObject",
      "Resource": "arn:aws:s3:::你的存储桶名称/*"
    }
  ]
}

4. 修复前端代码细节
   代码中存在两处小问题，虽然不直接影响元数据，但建议修复避免其他异常：

• 路径分割的转义错误：split("\")应改为split("\\")（JavaScript中反斜杠需双重转义）
• customLabels未声明变量，建议添加let或var避免全局污染

修改后的前端代码示例：

function upload() {
  var path = document.getElementById("uploaded_file").value.split("\\");
  console.log("Here is the path: ", path);

  let customLabels = document.getElementById("custom_labels").value;
  console.log("Here are the custom labels: ", customLabels);

  var file_name = path[path.length - 1];
  console.log("The file name is: ", file_name);

  var file = document.getElementById("uploaded_file").files[0];
  console.log("Here is the file: ", file);
  console.log("Size of customLabels?", customLabels.length);
  
  let headers = {
    'Content-Type': file.type
  };
  if (customLabels.trim().length > 0) {
    headers['x-amz-meta-customlabels'] = customLabels.trim();
  }

  console.log("The headers are: ", headers);

  const url = "my apig gateway url" + file.name;

  axios.put(url, file, { headers: headers }).then(response => {
    console.log(response)
    alert("Image uploaded: " + file.name);
  }).catch(function(result) {
    console.log("result", result);
  });
}

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