✨ 저의 Serverless 시리즈는 Typescript, yarn, AWS 기준으로 작성되므로 읽기 전 참고 바랍니다 ✨

Serverless로 서버를 구축하다보면, End to End로 하나 하나 만들어야 할 상황이 존재하며, 내가 그런 상태다.

협업에 넣다보니, CORS 에러가 심심치않게 일어나게 되는데
보통 이는 Response Header에 다음과 같은 값들을 넣어주면 해결된다.

{
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Credentials": true
}

하지만, 의도치않은 에러가 발생할 경우에는 위와 같은 헤더를 같이 돌려주기를 실패할 수도 있다.
필자가 그랬다.

그러기에 해결하는 법을 공유하고자 포스팅하게 되었다.

어떻게 해결했을까?

필자는 serverless.yml을 통해 serverless설정을 다루는데

resources:
  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"

다음과 같이, 기본응답에 CORS 관련 헤더들을 포함시켜
의도치않은 에러가 발생할 경우에 CORS를 방지하고자 했다.

끝!