Handle API Gateway CORS Errors

API를 배포하기 전에 마지막으로 설정할 내용이 있습니다. 바로 CORS 헤더를 API Gateway 오류에 추가하는 일입니다. 노트 추가 API 생성하기 장에서 우리는 람다 함수에 CORS 헤더를 추가했었습니다. 사실 API 요청을 할 때, API Gateway는 Lambda 함수 전에 호출됩니다. 즉, API Gateway 수준에서 오류가 발생하면 CORS 헤더가 설정되지 않습니다.

이것 때문에 고객이 오류 메시지를 볼 수 없어 디버깅하기가 어렵습니다. 그냥 다음과 같이 표시됩니다.

No 'Access-Control-Allow-Origin' header is present on the requested resource

CORS 관련 오류는 가장 일반적인 Serverless API 오류 중 하나입니다. 이 장에서는 HTTP 오류가있는 경우 CORS 헤더를 설정하도록 API Gateway를 구성하려고합니다. 지금 당장은 이를 테스트 할 수 없지만 프론트 엔드 클라이언트에서 작업 할 때 정말 도움이 될 것입니다.

리소스 만들기

API Gateway 오류를 구성하기 위해 우리는serverless.yml에 몇 가지를 추가 할 것입니다. 기본적으로 Serverless Framework는 [CloudFormation] (https://aws.amazon.com/cloudformation/)을 지원하므로 코드를 통해 API Gateway를 구성 할 수 있습니다.

리소스를 추가 할 디렉토리를 만들어 보겠습니다. 나중에이 가이드의 뒷부분에 추가하겠습니다.

$ mkdir resources/

그리고 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 에러를 위한 것입니다.

리소스 포함시키기

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

serverless.yml 파일에 아래 내용을 추가합니다.

# 분리된 CloudFormation 템플릿을 생성합니다. 
resources:
  # API Gateway 에러 
  - ${file(resources/api-gateway-errors.yml)}

이제 API를 배포할 준비가 되었습니다.