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

간략한 설명

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

REST API용 CORS를 구성하는 방법에 대한 자세한 내용을 보려면 REST API 리소스의 CORS 사용을 참고하세요. HTTP API의 경우 HTTP API용 CORS 구성을 참조하세요.

참고: CORS는 리소스 수준에서 구성해야 하며 API Gateway 구성 또는 AWS Lambda와 같은 백엔드 통합을 사용하여 처리할 수 있습니다.

해결 방법

다음 예제 절차는No ‘Access-Control-Allow-Origin’ header present CORS 오류를 해결하는 방법을 보여 줍니다. 하지만 비슷한 절차를 사용하여 유사한 CORS 오류 문제를 해결할 수 있습니다. 예제: Method not supported under Access-Control-Allow-Methods header 오류 및 No ‘Access-Control-Allow-Headers’ headers present 오류.

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

• API가 필수 CORS 헤더를 반환하는 OPTIONS 메서드로 구성되지 않았습니다.
• 다른 메서드 유형(예: GET, PUT 또는 POST)이 필수 CORS 헤더를 반환하도록 구성되어 있지 않습니다.
• 프록시 통합 또는 비프록시 통합이 포함된 API는 필수 CORS 헤더를 반환하도록 구성되어 있지 않습니다.
• (프라이빗 REST API에만 해당) 잘못된 호출 URL이 호출되거나 트래픽이 인터페이스 Virtual Private Cloud(VPC) 엔드포인트로 라우팅되지 않습니다.

오류 원인 확인

API Gateway에서 CORS 오류의 원인을 확인하는 방법은 두 가지가 있습니다.

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

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

REST API의 경우

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

HTTP API의 경우

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

중요: HTTP API용 CORS를 구성하는 경우 API Gateway에서 자동으로 프리플라이트 OPTIONS 요청에 응답합니다. API에 OPTIONS 경로가 구성되어 있지 않아도 이 응답이 전송됩니다. CORS 요청의 경우 API Gateway에서 구성된 CORS 헤더를 통합 응답에 추가합니다.

API 리소스에서 CORS를 구성할 때는 다음을 실행해야 합니다.

• API용 게이트웨이 <api-name> 응답의 경우, DEFAULT 4XX 및 DEFAULT 5XX 확인란을 선택합니다.

참고: 이러한 기본 옵션을 선택하면 요청이 엔드포인트에 도달하지 않더라도 API Gateway에서 필수 CORS 헤더로 응답합니다. 예를 들어 요청에 잘못된 리소스 경로가 포함되어 있으면 API Gateway는 여전히 403 "Missing Authentication Token" 오류로 응답합니다.

• 메소드의 경우 아직 선택되어 있지 않으면 OPTIONS 메소드의 확인란을 선택합니다. 또 CORS 요청에 사용할 수 있는 다른 메서드를 모두 선택합니다. 예제: GET, PUT 및 POST.

**참고:**API Gateway 콘솔에서 CORS를 구성하면 OPTIONS 메서드가 아직 없는 경우 리소스에 OPTIONS 메서드가 추가됩니다. 또 필수 Access-Control-Allow-* 헤더를 사용하여 **OPTIONS ** 메서드의 200 응답을 구성합니다. 콘솔을 사용하여 CORS를 이미 구성한 경우 CORS를 다시 구성하면 기존 값을 덮어씁니다.

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

응답에 필수 CORS 헤더를 전송하도록 백엔드 AWS Lambda 함수 또는 HTTP 서버를 구성합니다. 다음 사항에 유의하세요.

• Access-Control-Allow-Origin 헤더 값 목록에 허용된 도메인이 포함되어야 합니다.
• 프록시 통합의 경우 API 백엔드에서 반환한 응답 파라미터를 수정하기 위해 API Gateway에서 통합 응답을 설정할 수 없습니다. 프록시 통합에서 API Gateway는 백엔드 응답을 클라이언트에 직접 전달합니다.
• 비프록시 통합을 사용하는 경우, 필요한 CORS 헤더를 반환하도록 API Gateway에서 통합 응답을 수동으로 설정해야 합니다.

참고: 비프록시 통합이 포함된 API의 경우 API Gateway 콘솔을 사용하여 리소스에 CORS를 구성하면 필요한 CORS 헤더가 리소스에 자동으로 추가됩니다.

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

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

프라이빗 DNS가 활성화된 경우

Amazon Virtual Private Cloud(Amazon VPC) 내에서 프라이빗 DNS 이름을 사용하여 비공개 API를 호출하고 있는지 확인합니다.

프라이빗 DNS가 활성화되지 않은 경우

호출 URL에서 VPC 엔드포인트의 IP 주소로 트래픽을 수동으로 라우팅해야 합니다.

참고: 프라이빗 DNS의 활성화 여부에 관계없이 다음 호출 URL을 사용해야 합니다.

https://api-id.execute-api.region.amazonaws.com/stage-name

api-id, 리전 및 stage-name의 값을 API에 필요한 값으로 바꿔야 합니다. 자세한 내용을 보려면 프라이빗 API 호출 방법을 참고하세요.

중요: 프라이빗 DNS가 활성화되지 않은 상태에서 CORS를 구성하는 경우 다음 제한 사항에 유의하세요.

• 엔드포인트별 공용 DNS 이름을 사용하여 Amazon VPC 내에서 프라이빗 API에 액세스할 수 없습니다.
• 브라우저의 요청은 호스트 헤더 조작을 허용하지 않기 때문에 Host 헤더 옵션을 사용할 수 없습니다.
• x-apigw-api-id 사용자 지정 헤더는 헤더를 포함하지 않는 실행 전 OPTIONS 요청을 시작하므로 사용할 수 없습니다. x-apigw-api-id 헤더를 사용하는 API 호출은 API에 도달하지 않습니다.

관련 정보

CORS 테스트

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