JS AWS S3 SDK调用getSignedURL返回undefined 无法获取S3预签名URL

问题修正方案 #

你的代码存在以下几处核心错误，按优先级修复即可正常运行：

• 异步逻辑处理错误：generatePreSignedGetUrl返回值是Promise对象，你用同步方式直接赋值无法拿到真实URL，需要通过async/await或者then方法获取异步结果
• 配置未关联实例：你单独创建的awsConfig对象没有传入S3构造函数，同时重复声明了awsBucket变量，无用的空实例覆盖逻辑会导致配置失效
• 初始化语法错误：$(document).ready()需要传入函数引用，你写的initialise()是直接执行函数，且initialise函数末尾多了不匹配的错误回调括号，属于语法错误
• 参数冗余：getObject场景生成预签名URL不需要传ContentType参数，该参数仅用于上传类预签名URL生成

另外你写的区域eu-west-2是正确的，对应AWS伦敦区域。

安全提示 #

绝对不要在前端生产环境代码中硬编码AWS访问密钥，所有访问你页面的用户都可以直接拿到密钥，获得你S3存储桶的完全操作权限，正规实现应该是后端服务生成预签名URL后提供给前端调用，以下修正仅适用于本地临时测试场景。

修正后的JS代码 #

var awsAccessKeyID = 'my-access-key';
var awsSecretAccessKey = 'my-secret-key';
var awsBucketName = 'bucket-name';
const URL_EXPIRATION_TIME = 60; // 单位：秒
var awsRegion = 'eu-west-2';

// 修正初始化写法，传入函数引用而非直接执行
$(document).ready(initialise);

// 页面初始化函数，修复语法错误
function initialise() {
  console.log('Test');
  // 绑定刷新按钮点击事件
  $("#refreshImageButton").click(function() {
    let imagePath = '1.jpg';
    refreshImage(imagePath);
  });
}

// 图片刷新函数，新增async关键字支持await
async function refreshImage(imagePath){
  console.log(`Image path: ${imagePath}`);
  // 等待Promise返回真实预签名URL
  let preSignedURL = await generatePreSignedGetUrl(imagePath);
  console.log(preSignedURL);
  $("#displayImage").attr("src", preSignedURL);
}

// 预签名URL生成函数，修正配置关联逻辑
function generatePreSignedGetUrl(fileName) {
  return new Promise(function(resolve, reject){
    // 初始化S3实例时直接传入所有配置，不需要单独创建AWS.Config
    const awsBucket = new AWS.S3({
      accessKeyId: awsAccessKeyID,
      secretAccessKey: awsSecretAccessKey,
      region: awsRegion,
      params: { Bucket: awsBucketName }
    });
    awsBucket.getSignedUrl('getObject', {
      Key: fileName,
      Expires: URL_EXPIRATION_TIME
    }, (err, url) => {
      if (err) {
        console.error('生成预签名URL失败：', err);
        reject(err);
        return;
      }
      resolve(url);
    });
  });
}

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