API Gateway API에서 발생한 CORS 오류 문제를 해결하려면 어떻게 해야 하나요?

간략한 설명

---

Cross-origin resource sharing(CORS) 오류는 서버가 CORS 표준에 필요한 HTTP 헤더를 반환하지 않을 때 발생합니다. API Gateway REST API 또는 HTTP API에서 CORS 오류를 해결하려면 CORS 표준을 충족하도록 API를 재구성해야 합니다.

참고: 리소스 수준에서 CORS를 구성해야 합니다. API 게이트웨이 구성 또는 AWS Lambda와 같은 백엔드 통합을 사용합니다.

해결 방법

'Access-Control-Allow-Origin' 헤더가 CORS 오류를 나타내는 것에 더해 다음 절차를 사용하여 모든 CORS 오류 문제를 해결할 수 있습니다. 다른 CORS 오류에는 Method not supported under Access-Control-Allow-Methods header 및 No ‘Access-Control-Allow-Headers’ headers present가 있습니다.

No 'Access-Control-Allow-Origin' header present 오류는 다음과 같은 이유로 발생할 수 있습니다.

• 필수 CORS 헤더를 반환하는 OPTIONS 메서드로 API를 구성하지 않았습니다.
• 필요한 CORS 헤더를 반환하도록 GET, PUT, 또는 POST와 같은 다른 메서드 유형을 구성하지 않았습니다.
• 프록시 통합 또는 비프록시 통합이 포함된 API를 필수 CORS 헤더를 반환하도록 구성하지 않았습니다.
• 프라이빗 REST API의 경우 잘못된 간접 URL이 호출됩니다. 또는 트래픽이 인터페이스 가상 프라이빗 클라우드(VPC) 엔드포인트로 라우팅되지 않았습니다.

오류 원인 확인

다음 조치를 취하세요.

• API를 간접적으로 호출할 때 HTTP Archive(HAR) 파일을 생성합니다. 그런 다음 API 응답에서 반환되는 매개 변수 헤더를 확인하여 파일 오류의 원인을 확인합니다.
• 브라우저의 개발자 도구를 사용하여 실패한 API 요청의 요청 및 응답 파라미터를 확인합니다.

장애가 발생한 API 리소스에 CORS를 구성합니다.

REST API의 경우

지침에 따라 API Gateway 콘솔을 사용하여 리소스에서 CORS를 활성화합니다.

HTTP API의 경우

HTTP API용 CORS 구성의 지침을 따르세요.

API 리소스에서 CORS를 구성할 때 다음 옵션을 선택합니다.

게이트웨이 응답의 경우 DEFAULT 4XX 및 DEFAULT 5XX를 선택합니다.DEFAULT 4XX 및 DEFAULT 5XX를 선택하면 요청이 엔드포인트에 도달하지 않더라도 API Gateway에서 필수 CORS 헤더로 응답합니다. 예를 들어 요청에 잘못된 리소스 경로가 포함되어 있으면 API Gateway는 여전히 403 "Missing Authentication Token" 오류로 응답합니다.

Access-Control-Allow-Methods의 경우, OPTIONS가 미리 선택되어 있지 않다면 해당 메서드와 CORS 요청에 사용할 수 있는 GET, PUT, POST와 같은 다른 모든 메서드를 선택합니다. API Gateway 콘솔은 필수 Access-Control-Allow 헤더를 사용하여 OPTIONS 메서드의 200 응답을 구성하고 재구성된 리소스의 기존 값을 덮어씁니다.

필요한 CORS 헤더를 반환하도록 REST API 통합을 구성합니다

응답에 필수 CORS 헤더를 반환하도록 백엔드 Lambda 함수 또는 HTTP 서버를 구성합니다.Access-Control-Allow-Origin 헤더 값 목록에 허용된 도메인이 포함되어야 합니다.

프록시 통합의 경우 API 백엔드가 반환한 응답 파라미터를 수정하기 위해 API Gateway에서 통합 응답을 설정할 수 없습니다. 프록시 통합에서 API Gateway는 백엔드 응답을 클라이언트에 직접 전달합니다.

비프록시 통합의는 경우, 필요한 CORS 헤더를 반환하도록 API Gateway에서 통합 응답을 수동으로 설정해야 합니다. 콘솔이 구성된 리소스에 필요한 CORS 헤더를 자동으로 추가하므로 API Gateway 콘솔을 사용하여 CORS를 구성합니다.

(프라이빗 REST API에만 해당) 인터페이스 엔드포인트의 프라이빗 DNS 설정을 확인하세요

프라이빗 REST API의 경우 연결된 인터페이스 VPC 엔드포인트에서 프라이빗 DNS가 활성화되었는지 확인합니다.

프라이빗 DNS가 활성화됨

프라이빗 DNS 이름을 사용하여 Amazon Virtual Private Cloud(Amazon VPC) 내에서 프라이빗 API를 간접적으로 호출합니다.

프라이빗 DNS가 활성화되지 않음

호출 URL에서 VPC 엔드포인트의 IP 주소로 트래픽을 수동으로 라우팅해야 합니다. 다음 간접 호출 URL(Route53 별칭)을 사용하세요.

https://{rest-api-id}-{vpce-id}.execute-api.{region}.amazonaws.com/{stage}

**참고:**rest-api-id, 리전, vpce-id 및 스테이지를 API 값으로 바꾸세요. 자세한 내용을 보려면 프라이빗 API 호출 방법을 참고하세요.

프라이빗 DNS가 활성화되지 않는 경우, 엔드포인트별 퍼블릭 DNS 이름을 사용하여 Amazon VPC 내에서 프라이빗 API에 액세스할 수는 없습니다. 또한 브라우저의 요청은 호스트 헤더 수정을 허용하지 않기 때문에 Host 헤더 옵션을 사용할 수 없습니다.

프라이빗 API의 경우 x-apigw-api-id 사용자 지정 헤더는 헤더를 포함하지 않는 실행 전 OPTIONS 요청을 시작하므로 사용할 수 없습니다. x-apigw-api-id 헤더를 사용하는 API 호출은 API에 도달하지 않습니다.

참고: API의 OPTIONS 메서드에서 권한 부여가 꺼져 있는지 확인하세요.

관련 정보

CORS 테스트

API Gateway 가져오기 API를 사용하여 리소스에서 CORS를 활성화