API Gateway CORS 오류 처리하기

우리의 Serverless Framework 앱은 이제 인프라를 코드로 구성하여 리소스를 설정하고 있습니다. 하지만 앞으로 나아가기 전에 한 가지 작은 세부 사항을 살펴볼 필요가 있습니다.

이전 장에서 우리는 API 엔드포인트와 Lambda 함수를 CORS와 함께 설정했습니다. 그러나 API 요청을 할 때, API Gateway가 Lambda 함수보다 먼저 호출됩니다. 이는 API Gateway 수준에서 오류가 발생하면 CORS 헤더가 설정되지 않음을 의미합니다.

결과적으로, 이러한 오류를 디버깅하는 것은 매우 어려울 수 있습니다. 클라이언트는 오류 메시지를 볼 수 없고 대신 다음과 같은 메시지를 보게 됩니다:

요청된 리소스에 'Access-Control-Allow-Origin' 헤더가 없습니다.

이러한 CORS 관련 오류는 서버리스 API에서 가장 흔한 오류 중 하나입니다. 이번 장에서는 HTTP 오류가 발생할 경우 API Gateway가 CORS 헤더를 설정하도록 구성할 것입니다. 이를 바로 테스트할 수는 없지만, 프론트엔드 클라이언트 작업 시 큰 도움이 될 것입니다.

리소스 생성하기

API Gateway 오류를 설정하기 위해 serverless.yml에 또 다른 리소스를 추가할 것입니다.

resources/api-gateway-errors.yml에 다음 내용을 추가하세요.

Resources:
  GatewayResponseDefault4XX:
    Type: 'AWS::ApiGateway::GatewayResponse'
    Properties:
      ResponseParameters:
         gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
         gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
      ResponseType: DEFAULT_4XX
      RestApiId:
        Ref: 'ApiGatewayRestApi'
  GatewayResponseDefault5XX:
    Type: 'AWS::ApiGateway::GatewayResponse'
    Properties:
      ResponseParameters:
         gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
         gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
      ResponseType: DEFAULT_5XX
      RestApiId:
        Ref: 'ApiGatewayRestApi'

위 내용이 조금 복잡해 보일 수 있습니다. 이는 CloudFormation 리소스이며, 구문이 다소 장황한 경향이 있습니다. 하지만 여기서 세부 사항은 크게 중요하지 않습니다. 우리는 앱의 ApiGatewayRestApi 리소스에 CORS 헤더를 추가하고 있습니다. GatewayResponseDefault4XX는 4xx 오류를 위한 것이고, GatewayResponseDefault5XX는 5xx 오류를 위한 것입니다.

이것은 4xx와 5xx 오류에 대해 CORS 헤더를 반환한다는 의미입니다.

리소스 포함하기

이제 위의 CloudFormation 리소스를 serverless.yml에 포함해 보겠습니다.

serverless.yml의 resources: 블록을 다음으로 교체하세요.

# 별도의 CloudFormation 템플릿으로 리소스 생성
resources:
  # API Gateway 오류
  - ${file(resources/api-gateway-errors.yml)}
  # DynamoDB
  - ${file(resources/dynamodb-table.yml)}
  # S3
  - ${file(resources/s3-bucket.yml)}
  # Cognito
  - ${file(resources/cognito-user-pool.yml)}
  - ${file(resources/cognito-identity-pool.yml)}

들여쓰기가 올바른지 확인하세요. resources: 블록은 최상위 속성입니다.

이제 새로운 서버리스 인프라를 배포할 준비가 되었습니다.