为AWS SAM配置CORS：解决Angular应用调用API接口的跨域问题

我来帮你解决这个CORS问题！Postman能正常调用但Angular不行的核心原因是浏览器会发送OPTIONS预检请求，而Postman不会——你的API Gateway目前没有配置OPTIONS方法来响应这个预检请求，这就是报错的根源。下面一步步教你通过SAM模板搞定CORS，同时理清授权提示的问题：

1. 给SAM模板添加全局CORS配置（推荐） #

在你的SAM模板的Globals区块里新增Api配置，这样所有API端点都会自动生成OPTIONS方法并配置正确的CORS头，不用逐个端点手动设置：

修改后的Globals部分如下：

Globals:
  Function:
    Runtime: nodejs12.x
    Environment:
      Variables:
        TABLE_NAME: !Ref Table
    MemorySize: 128
    Timeout: 5
  Api:
    Cors:
      AllowMethods: "'POST,OPTIONS'"
      AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
      AllowOrigin: "'*'" # 注意：生产环境请替换成你的Angular应用域名，比如'https://your-angular-app.com'
      AllowCredentials: "'true'"

2. 确保Lambda函数返回正确的CORS头 #

你的register.js已经在响应里加了CORS头，这点做得很好！不过要注意：

• 生产环境不要用*作为Access-Control-Allow-Origin，必须指定具体的前端域名，否则浏览器会拦截带凭证的请求
• 如果你的Angular请求里有自定义头，要把这些头加到SAM的AllowHeaders里，同时Lambda返回的Access-Control-Allow-Headers也要包含它们

3. 关于部署时的授权提示 #

这个提示和当前的CORS问题无关——它只是提醒你API Gateway端点没有配置授权机制（比如Cognito Authorizer、API Key等），如果你的注册接口是公开的（不需要用户先登录），这个提示可以忽略。如果后续需要给其他接口（比如登录、确认）添加授权，你可以在SAM的API事件里配置，比如：

Events:
  LoginUser:
    Type: Api
    Properties:
      Path: /login
      Method: post
      Auth:
        Authorizer: MyCognitoAuthorizer

不过这部分不影响当前的CORS问题，不用急着处理。

4. 部署验证 #

修改完SAM模板后，重新部署：

sam deploy --guided

部署完成后，去AWS控制台的API Gateway里检查每个端点（/register、/login、/confirm）是否自动生成了OPTIONS方法，然后用浏览器的开发者工具测试Angular的注册请求，预检OPTIONS请求应该能返回200，并且包含正确的CORS头。

修改后的完整SAM模板示例 #

AWSTemplateFormatVersion: '2010-09-09'
Transform: AWS::Serverless-2016-10-31
Description: REST API using SAM
Globals:
  Function:
    Runtime: nodejs12.x
    Environment:
      Variables:
        TABLE_NAME: !Ref Table
    MemorySize: 128
    Timeout: 5
  Api:
    Cors:
      AllowMethods: "'POST,OPTIONS'"
      AllowHeaders: "'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'"
      AllowOrigin: "'*'" # 生产环境替换为你的Angular域名
      AllowCredentials: "'true'"
Resources:
  Table:
    Type: AWS::Serverless::SimpleTable
    Properties:
      PrimaryKey:
        Name: userid
        Type: String
      ProvisionedThroughput:
        ReadCapacityUnits: 1
        WriteCapacityUnits: 1
  ConfirmUser:
    Type: AWS::Serverless::Function
    Properties:
      Handler: confirm.handler
      Events:
        GetUser:
          Type: Api
          Properties:
            Path: /confirm
            Method: post
  RegisterUser:
    Type: AWS::Serverless::Function
    Properties:
      Handler: register.handler
      Policies: AmazonDynamoDBFullAccess
      Events:
        GetUser:
          Type: Api
          Properties:
            Path: /register
            Method: post
  LoginUser:
    Type: AWS::Serverless::Function
    Properties:
      Handler: login.handler
      Events:
        GetUser:
          Type: Api
          Properties:
            Path: /login
            Method: post

这样配置后，Angular应用就能正常发起注册请求，不会再触发CORS错误了！

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