HTTP API에서 CORS 오류 수정

여러 요청 유형에 대해 단일 경로를 생성할 때 브라우저 요청에서 CORS 오류를 수신할 수 있습니다. Lambda 함수를 사용하여 HTTP API에서 실행 전 요청에 대한 모의 통합을 쉽게 생성할 수 있습니다.

1. 문제 진술

Alice는 HTTP API Gateway을 사용하여 새로운 서비스를 구축하고 있습니다. React 애플리케이션은 엔드포인트를 호출하고 Authorization 헤더의 토큰을 사용하여 API 게이트웨이로 요청을 인증합니다.

대부분의 요청이 브라우저에서 오기 때문에 그녀는 사용자 정의 도메인을 구성하고 API 게이트웨이에서 설정CORS했습니다.

그녀가 ANY /{proxy+} 포괄 경로를 추가하기 전까지는 모든 것이 잘 진행되었습니다. 권한 부여자를 추가하고 GET /todos 요청으로 엔드포인트를 호출한 후 다음 오류를 수신했습니다.

Access to XMLHttpRequest at 'https://SUBDOMAIN.DOMAIN_NAME/todos' from
origin 'http://localhost:3000' has been blocked by CORS policy: Response
to preflight request doesn't pass access control check: It does not have
HTTP ok status.

그녀는 지금 무엇을 할 수 있습니까?

2. 옵션

그녀가 API 게이트웨이에서 설정한 CORS 구성은 다음과 같습니다.



프런트 엔드 개발을 위해 localhost:3000의 요청을 허용합니다. 구성에는 애플리케이션이 사용할 HTTP request methods이 포함되어 있습니다. 허용된 헤더도 좋아 보입니다.

엔드포인트는 여전히 위의 CORS 오류로 응답합니다.

기본적으로 API Gateway는 실행 전 OPTIONS 요청에 대한 응답을 자동으로 보냅니다. 예를 들어 GET /todos 또는 POST /todos 와 같이 경로에 메서드를 지정하는 한 CORS 문제가 발생하지 않습니다. 그러나 경로에서 ANY를 사용하면 오류가 발생합니다.

엔드포인트를 보호되지 않은 상태로 두고 권한 부여자를 제거하면 성공적인 요청을 받게 됩니다. 문제는 인증된 사용자만 호출할 수 있도록 경로를 보호해야 한다는 것입니다.

3. 해결책

대신 사용자 지정 통합을 사용하여 승인되지 않은OPTIONS 경로를 생성할 수 있습니다.

원래 통합을 OPTIONS 에 추가할 수 있지만 모의 통합을 고려하는 것이 좋습니다.

REST API Gateways은 OPTIONS 경로에 사용할 수 있는 모의 통합을 지원합니다. 불행하게도 HTTP API에 대한 모의 통합이 내장되어 있지 않습니다.

그것은 우리가 하나를 만들어야 한다는 것을 의미합니다. 그렇게 하는 것은 쉽고 간단한 Lambda 함수가 작업을 수행합니다.

exports.handler = async (event) => {
  const response = {
    statusCode: 204,
  };
  return response;
};

이 기능을 통합으로 OPTIONS에 첨부할 수 있습니다.

4. 모든 경로

CORS 오류로 실패하는 것은 ANY /{proxy+} 경로뿐만 아니라 다른 ANY 경로도 마찬가지입니다. 예를 들어 ANY /todos 엔드포인트는 권한 부여자로 보호하는 경우에도 CORS 오류를 반환합니다.

여기서 솔루션은 위와 동일하며 OPTIONS 경로를 생성하고 프리플라이트 핸들러 Lambda 함수를 통합으로 추가합니다. 여러 경로ANY에 동일한 기능을 재사용할 수 있습니다.

5. API 설정이 재생됩니다.

브라우저 애플리케이션의 ANY 요청으로 https://SUBDOMAIN.DOMAIN_NAME/todos 엔드포인트에 도달하면 응답 헤더에는 API 게이트웨이의 CORS 섹션에서 설정한 매개 변수가 포함됩니다.



API Gateway가 통합 응답을 무시하기 때문입니다. 여기서 프리플라이트 처리기는 응답의 HTTP 상태가 될 204 상태 코드만 반환합니다. 다른 모든 것은 CORS에 대해 지정한 설정에서 가져옵니다.

6. 요약

승인되지 않은OPTIONS 엔드포인트를 지정하지 않는 한 범용 경로는 CORS 오류로 응답합니다. 이 엔드포인트는 보호되지 않기 때문에 이 경로에 모의 통합을 연결해야 합니다. HTTP API에는 모의 통합 개념이 없으므로 통합을 생성하여 OPTIONS 요청에 사용할 가치가 있습니다.

7. 추가 자료

Choosing between REST APIs and HTTP APIs - 많은 테이블과 비교

Configuring CORS for an HTTP API - 제목 그대로입니다.

Cross-Origin Resource Sharing (CORS)
- CORS 개요