使用Lambda+API Gateway+HTML表单时遭遇CORS错误求助

先修复前端请求的明显错误 #

你当前的请求代码里对body做了双重JSON序列化，这会导致发送的数据格式错误，后端无法解析，进而引发预检或主请求失败：

// 错误写法：两次JSON.stringify
const body = JSON.stringify({ 
  senderName: name.value, 
  senderEmail: email.value, 
  message: message.value, 
}); 
const requestOptions = { 
  method: "POST", 
  body : JSON.stringify(body), // 这里重复序列化了
  headers: { 
      "Content-Type": "application/json", 
  }, 
};

改成只序列化一次：

const endpoint = "https://kwhn71man3.execute-api.eu-west-2.amazonaws.com/original/BotNestForm"; 
const requestOptions = { 
  method: "POST", 
  body : JSON.stringify({ 
    senderName: name.value, 
    senderEmail: email.value, 
    message: message.value, 
  }), 
  headers: { 
      "Content-Type": "application/json", 
  }, 
};

另外，前端请求里不需要加Access-Control-Allow-Origin头，这个是后端返回给前端的响应头，前端加了没用。

针对预检请求失败的核心解决步骤 #

报错提示"Response to preflight request doesn't pass access control check: It does not have HTTP ok status"，说明OPTIONS预检请求没返回200状态，按以下步骤排查：

1. 确保API Gateway的CORS配置已正确部署 #

• 登录AWS控制台，打开你的API Gateway，找到BotNestForm这个资源
• 点击"Actions" → "Enable CORS"，在配置界面：
  • 把Access-Control-Allow-Origin设为http://127.0.0.1:5500（开发环境精确匹配比*更安全），或者*
  • 确保Access-Control-Allow-Methods包含POST, OPTIONS
  • Access-Control-Allow-Headers包含Content-Type
• 关键：配置完成后，必须点击"Deploy API"，选择你的部署阶段（比如original），否则配置不会生效

2. 检查OPTIONS方法的处理逻辑 #

• 如果你是通过"Enable CORS"自动生成的OPTIONS方法，API Gateway会自动处理预检请求，返回200和正确的响应头，无需Lambda介入
• 如果你手动给OPTIONS方法绑定了Lambda函数，那这个Lambda必须返回200状态和CORS响应头，比如Python示例：

  def lambda_handler(event, context):
      return {
          'statusCode': 200,
          'headers': {
              'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
              'Access-Control-Allow-Methods': 'POST, OPTIONS',
              'Access-Control-Allow-Headers': 'Content-Type'
          },
          'body': ''
      }
  

  建议：除非特殊需求，不要给OPTIONS方法绑定Lambda，让API Gateway自动处理更稳妥。

3. 检查POST请求的Lambda响应 #

你的POST Lambda函数必须返回包含CORS头的200响应，否则即使预检过了，主请求也会报错：
Python示例：

def lambda_handler(event, context):
    # 处理表单数据逻辑...
    return {
        'statusCode': 200,
        'headers': {
            'Access-Control-Allow-Origin': 'http://127.0.0.1:5500'
        },
        'body': json.dumps({'message': '表单提交成功'})
    }

Node.js示例：

exports.handler = async (event) => {
    // 处理逻辑...
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Origin": "http://127.0.0.1:5500"
        },
        body: JSON.stringify({message: "表单提交成功"}),
    };
    return response;
};

4. 手动测试预检请求 #

用curl命令测试OPTIONS请求，确认返回状态和响应头：

curl -X OPTIONS https://kwhn71man3.execute-api.eu-west-2.amazonaws.com/original/BotNestForm \
-H "Origin: http://127.0.0.1:5500" \
-H "Access-Control-Request-Method: POST" \
-H "Access-Control-Request-Headers: Content-Type" \
-v

如果返回状态码是200，且包含Access-Control-Allow-Origin等头，说明预检配置正常；如果返回4xx或5xx，检查API Gateway部署状态和OPTIONS方法配置。

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