API CORS

[adrianlaraperez88]

SAM CLI 1.0.9
AWS CLI 2.15.21

I have a little template working correct in curl and POstman but i have issue with CORS in Browser , maybe someone can help me

Template :

AWSTemplateFormatVersion: '2010-09-09'
Description: "kickbox-api - API Integration to make email verifications"

Transform:
  - AWS::Serverless-2016-10-31

Globals:
  Api:
    TracingEnabled: true
  Function:
    Tracing: Active
    Environment:
      Variables:
        StageName: !Ref StageName
        TableName: !Ref TableName

Parameters:
  TableName:
    Description: "Name of the DynamoDB table"
    Type: String
    Default: "test"

  StageName:
    Description: "Stage name for deployment"
    Type: String
    AllowedValues: ["prod", "dev"]
    Default: "dev"

Resources:
  RestApi:
    Type: AWS::Serverless::Api
    Properties:
      Cors:
        AllowMethods: "'HEAD,OPTIONS,POST'"
        AllowHeaders: "'*'"
        AllowOrigin: "'*'"
      Name: !Sub "${StageName}-Kickbox-api"
      StageName: !Ref StageName
      EndpointConfiguration: EDGE

  authorizerBearer:
    Type: 'AWS::Serverless::Function'
    Properties:
      Policies:
        - AWSSecretsManagerGetSecretValuePolicy:
            SecretArn: !Sub "arn:aws:secretsmanager:us-east-1:012325654:secret:${StageName}/*"
      CodeUri: ./
      Handler: src/handlers/authorizer.handlerAuthorizer
      Runtime: nodejs18.x

  TestFunction:
    Type: AWS::Serverless::Function
    Properties:
      Policies:
        - AmazonSNSFullAccess
        - DynamoDBCrudPolicy:
            TableName: !Ref TableName
        - AWSSecretsManagerGetSecretValuePolicy:
            SecretArn: !Sub "arn:aws:secretsmanager:us-east-1:012325654:secret:${StageName}/*"
      FunctionName: !Sub "${StageName}-Kickbox-emailVerification"
      CodeUri: ./
      Handler: src/handlers/main
      Runtime: nodejs18.x
      Architectures:
        - arm64
      Timeout: 60
      MemorySize: 256
      Events:
        Api:
          Type: Api
          Properties:
            Path: /email
            Method: POST
            RestApiId: !Ref RestApi
            Auth:
              ApiKeyRequired: true
              AddDefaultAuthorizerToCorsPreflight: false
              DefaultAuthorizer: authorizerBearer
              Authorizers:
                authorizerBearer:
                  FunctionArn: !GetAtt authorizerBearer.Arn
                  Identity:
                    Header: Authorization
                    ReauthorizeEvery: 0
        Options:
          Type: Api
          Properties:
            Path: /isg/kickbox/email
            Method: OPTIONS
            RestApiId: !Ref RestApi
            Auth:
              AddDefaultAuthorizerToCorsPreflight: false

  ApplicationResourceGroup:
    Type: AWS::ResourceGroups::Group
    Properties:
      Name: !Join ["", ["ApplicationInsights-SAM-", !Ref AWS::StackName]]
      ResourceQuery:
        Type: CLOUDFORMATION_STACK_1_0

Outputs:
  Region:
    Description: "AWS region"
    Value: !Ref AWS::Region

  ApiId:
    Description: "API ID"
    Value: !Ref RestApi

  ApiUrl:
    Value: !Sub "https://${RestApi}.execute-api.${AWS::Region}.amazonaws.com/${StageName}/"

in handle all response has this header

const headersInfo = {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "*",
    "Access-Control-Allow-Methods": "POST,GET,OPTIONS",
};

[lucashuy]

Hi, is there a specific CORS error message you are getting when trying to visit the endpoint in a browser?

[romeubertho]

Hello,

by looking at your code it seems you mixed Auth properties from AWS::Serverless::Api and AWS::Serverless::Function

Authorizers, AddDefaultAuthorizerToCorsPreflight, and DefaultAuthorizer is not a valid prop for Auth on an AWS::Serverless::Function resource, but it is for AWS::Serverless::Api

I suggest you add the Auth prop to your API resource.

Best regards.

[adrianlaraperez88]

Ready fixed

Auth: AddDefaultAuthorizerToCorsPreflight: false DefaultAuthorizer: authorizerBearer Authorizers:

CorsConfiguration: AllowHeaders: "'Content-Type,Origin,Accept,X-Requested-With,Authorization,X-Amz-Date'" AllowOrigin: "'*'" AllowMethods: "'*'" authorizerBearer:

Thank you !!

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.