React.js集成Amazon SES在Safari中无法运行的问题求助

问题原因 #

这个错误源于Safari对现代Web Streams API的支持不完善，而AWS SDK v3（@aws-sdk/client-ses）依赖该API实现网络请求，导致在Safari环境下无法正常运行。

解决方案 #

方案1：添加Web Streams Polyfill #

为Safari补充缺失的API支持：

1. 安装polyfill包：

npm install web-streams-polyfill

2. 在React项目的入口文件（如index.js或App.js）最顶部引入：

import 'web-streams-polyfill';

引入后重新构建项目，再在Safari中测试即可。

方案2：改用AWS SDK v2 #

AWS SDK v2对旧浏览器兼容性更好，不依赖Web Streams API：

1. 卸载v3的SES客户端：

npm uninstall @aws-sdk/client-ses

2. 安装v2的AWS SDK：

npm install aws-sdk

3. 修改代码适配v2：

const AWS = require('aws-sdk');

// 配置AWS
AWS.config.update({
  region: regionVal,
  credentials: {
    accessKeyId: accessKey,
    secretAccessKey: secretKey,
  }
});

const ses = new AWS.SES();

// 表单组件内的handleSubmit逻辑调整
const handleSubmit = async e => {
  e.preventDefault();
  
  const emailHtml = await render(<Email data={emailData} />);
  
  const params = {
    Source: 'email@email.com',
    Destination: {
      ToAddresses: ['email@email.com'],
    },
    Message: {
      Body: {
        Html: {
          Charset: 'UTF-8',
          Data: emailHtml,
        },
      },
      Subject: {
        Charset: 'UTF-8',
        Data: 'Form',
      },
    },
  };

  try {
    await ses.sendEmail(params).promise(); // v2需调用.promise()获取Promise
    console.log('Email sent successfully');
  } catch (error) {
    console.error('Error sending email:', error);
  }
}

关键安全提醒 #

绝对不要在前端代码中暴露AWS的accessKey和secretKey！ 当前代码直接把凭证写在前端，任何用户都能通过浏览器开发者工具获取这些密钥，进而滥用你的AWS资源（比如发送垃圾邮件、产生高额费用）。

正确的做法是：

• 搭建一个后端接口（比如用Node.js/Express、Python/Flask等）
• 前端将表单数据发送到这个后端接口
• 后端使用AWS SES发送邮件，AWS凭证仅保存在后端环境变量中

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