서버리스 API에서 CORS 처리하기

지금까지의 설정을 살펴보겠습니다. 사용자가 노트를 생성할 수 있는 서버리스 API 백엔드와 파일을 업로드할 수 있는 S3 버킷이 있습니다. 이제 프론트엔드 React 앱 작업을 준비할 단계입니다.

하지만 그 전에 한 가지 처리해야 할 사항이 있습니다. 바로 CORS(Cross-Origin Resource Sharing)입니다.

React 앱은 브라우저 내에서 실행되며, 서버리스 API와 S3 버킷과는 별도의 도메인에서 호스팅될 가능성이 높기 때문에, 리소스에 접근할 수 있도록 CORS를 설정해야 합니다.

백엔드 앱 아키텍처를 간단히 살펴보겠습니다.

서버리스 인증 API 아키텍처

클라이언트는 API, S3 버킷, 사용자 풀과 상호작용합니다. 사용자 풀 부분의 CORS는 내부적으로 처리됩니다. 따라서 API와 S3 버킷에 대한 CORS 설정이 필요합니다. 다음 몇 장에서 이를 설정해 보겠습니다.

CORS에 대해 간단히 배경을 알아보겠습니다.

CORS 이해하기

서버리스 API에서 CORS를 지원하려면 두 가지 작업이 필요합니다.

  1. 프리플라이트 OPTIONS 요청

    특정 유형의 크로스 도메인 요청(PUT, DELETE, 인증 헤더가 포함된 요청 등)의 경우, 브라우저는 먼저 OPTIONS 메서드를 사용해 프리플라이트 요청을 보냅니다. 이 요청은 해당 API에 접근할 수 있는 도메인과 허용된 HTTP 메서드를 응답으로 반환해야 합니다.

  2. CORS 헤더 응답

    다른 모든 유형의 요청에 대해 적절한 CORS 헤더를 포함해야 합니다. 이 헤더는 위에서 언급한 것처럼 허용된 도메인을 포함해야 합니다.

여기서 다룬 내용보다 CORS에는 더 많은 내용이 있습니다. 자세한 내용은 위키피디아 문서를 참고하세요.

위 설정을 하지 않으면 HTTP 응답에서 다음과 같은 메시지를 볼 수 있습니다.

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

그리고 브라우저는 HTTP 응답을 보여주지 않습니다. 이로 인해 API 디버깅이 매우 어려워질 수 있습니다.

API Gateway에서의 CORS

우리가 사용 중인 ApiGatewayV2 컴포넌트는 기본적으로 CORS를 활성화합니다.

new sst.aws.ApiGatewayV2("Api", {
  // 기본적으로 활성화됨
  cors: true
});

필요한 경우 구체적인 설정을 추가할 수 있습니다. 여기에서 더 자세히 읽어보세요.

new sst.aws.ApiGatewayV2("Api", {
  cors: {
    allowMethods: ["GET"]
  }
});

지금은 기본 설정을 사용하겠습니다.

Lambda 함수에서 CORS 헤더 설정

다음으로 Lambda 함수 응답에 CORS 헤더를 추가해야 합니다.

Change indicator packages/core/src/util/index.ts 파일의 return 문을 수정합니다.

return {
  body,
  statusCode,
};

Change indicator 위 코드를 아래와 같이 변경합니다.

return {
  body,
  statusCode,
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": true,
  },
};

CORS 헤더를 커스터마이징할 수 있지만, 여기서는 기본값을 사용하겠습니다.

위에서 수행한 두 단계는 Lambda 함수가 API Gateway를 통해 호출될 때 적절한 CORS 설정으로 응답하도록 보장합니다.

다음으로, S3 버킷에도 CORS 설정을 추가해 보겠습니다. 프론트엔드 React 앱이 파일을 직접 업로드할 것이기 때문입니다.