Node.js与浏览器JS调用带IAM认证的AWS Rest API问题

你的思路完全正确，可以把本地node_modules中的AWS相关库打包成浏览器兼容的ES6模块。下面是用Rollup（轻量打包工具）实现的具体步骤，适合新手快速上手：

步骤1：初始化项目（若未完成） #

如果还没创建项目文件夹，先执行：

mkdir aws-browser-api && cd aws-browser-api
npm init -y

步骤2：安装所需依赖和打包工具 #

安装AWS SDK依赖和Rollup相关工具：

npm install @aws-sdk/signature-v4 @aws-crypto/sha256-js axios
npm install --save-dev rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs

步骤3：创建Rollup配置文件 #

在项目根目录新建rollup.config.js，内容如下：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js', // 你的浏览器端代码入口
  output: {
    file: 'dist/aws-api.bundle.js', // 打包后的输出文件
    format: 'es', // 输出ES6模块格式
    sourcemap: true // 生成sourcemap方便调试
  },
  plugins: [
    resolve(), // 解析node_modules中的模块
    commonjs() // 将CommonJS模块转换为ES6
  ]
};

步骤4：编写浏览器端代码 #

在项目根目录新建src/index.js，把签名和请求逻辑调整为浏览器可用版本（注意：绝对不要在浏览器代码中硬编码AWS长期密钥，建议用Cognito身份池或临时凭证，以下为逻辑示例）：

import { SignatureV4 } from '@aws-sdk/signature-v4';
import { Sha256 } from '@aws-crypto/sha256-js';
import axios from 'axios';

// 浏览器环境请用安全方式获取凭证，比如AWS Cognito
const AWS_CREDENTIALS = {
  accessKeyId: '你的临时访问密钥ID',
  secretAccessKey: '你的临时私有访问密钥',
  sessionToken: '你的会话令牌（如果有）'
};
const API_URL = '你的AWS API Gateway URL';
const SERVICE_NAME = 'execute-api';
const REGION = '你的AWS区域，比如us-east-1';

const apiUrl = new URL(API_URL);

const sigv4 = new SignatureV4({
  service: SERVICE_NAME,
  region: REGION,
  credentials: AWS_CREDENTIALS,
  sha256: Sha256
});

export async function callAwsApi() {
  try {
    const signedRequest = await sigv4.sign({
      method: 'GET',
      hostname: apiUrl.host,
      path: apiUrl.pathname,
      protocol: apiUrl.protocol,
      headers: {
        'Content-Type': 'application/json',
        host: apiUrl.hostname
      }
    });

    const { data } = await axios({
      ...signedRequest,
      url: API_URL
    });

    console.log('请求成功:', data);
    return data;
  } catch (error) {
    console.error('请求失败:', error);
    throw error;
  }
}

步骤5：执行打包 #

在package.json的scripts中添加打包命令：

"scripts": {
  "build": "rollup -c"
}

然后执行打包：

npm run build

执行完成后，dist/aws-api.bundle.js就是浏览器可用的ES6模块。

步骤6：在网页中使用 #

创建一个HTML文件，引入打包后的模块并调用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AWS API Gateway 调用测试</title>
</head>
<body>
  <button onclick="callApi()">调用API</button>
  <script type="module">
    import { callAwsApi } from './dist/aws-api.bundle.js';

    window.callApi = async () => {
      try {
        const data = await callAwsApi();
        alert('请求成功，数据已在控制台输出');
      } catch (err) {
        alert('请求失败，请查看控制台');
      }
    };
  </script>
</body>
</html>

重要安全提醒 #

浏览器环境下绝对不能硬编码长期AWS密钥，这会导致密钥泄露。正确的做法是：

• 使用AWS Cognito身份池，让用户通过身份验证获取临时凭证
• 或者通过你的后端服务转发请求，由后端处理签名逻辑

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