API Management 개발자 포털에서 대화형 콘솔에 대한 CORS 사용

CORS(원본 간 리소스 공유)는 서버가 브라우저에서 리소스 로드를 허용해야 하는 자체 원본 이외의 모든 원본(도메인, 체계 또는 포트)을 나타낼 수 있도록 하는 HTTP 헤더 기반 메커니즘입니다.

API Management 개발자 포털 방문자가 API 참조 페이지의 대화형 테스트 콘솔을 사용할 수 있도록 하려면 API Management 인스턴스에서 API에 대한 CORS 정책을 사용하도록 설정합니다. 개발자 포털의 도메인 이름이 도메인 간 API 요청에 대해 허용되는 원본이 아닌 경우 테스트 콘솔 사용자에게 CORS 오류가 표시됩니다.

특정 시나리오의 경우 API에 대해 CORS 정책을 사용하도록 설정하는 대신 개발자 포털을 CORS 프록시로 구성할 수 있습니다.

적용 대상: 개발자 | 기본 | 표준 | 프리미엄

필수 조건

• 다음 빠른 시작 Azure API Management 인스턴스 만들기를 완료합니다.

API Management 인스턴스로 이동

1. Azure Portal에서 API Management 서비스를 검색하여 선택합니다.

   

2. API Management 서비스 페이지에서 API Management 인스턴스를 선택합니다.

   

API에 대한 CORS 정책 사용

API Management 인스턴스의 모든 API에 대해 CORS 정책을 자동으로 구성하는 설정을 사용하도록 설정할 수 있습니다. CORS 정책을 수동으로 구성할 수도 있습니다.

참고 항목

CORS 정책은 하나만 실행됩니다. 여러 CORS 정책을 지정하는 경우(예: API 레벨 및 모든 API 레벨에서) 대화형 콘솔이 예상대로 작동하지 않을 수 있습니다.

자동으로 CORS 정책 사용

1. API Management 인스턴스의 왼쪽 메뉴에 있는 개발자 포털에서 포털 개요를 선택합니다.
2. CORS 사용 아래에 CORS 정책 구성 상태가 표시됩니다. 경고 상자에는 존재하지 않거나 잘못 구성된 정책이 표시됩니다.
3. 모든 API에 대해 개발자 포털에서 CORS를 사용하도록 설정하려면 CORS 사용을 선택합니다.

수동으로 CORS 정책 사용

1. 전역 수준에서 수동으로 적용 링크를 클릭하여 생성된 정책 코드를 확인합니다.
2. API Management 인스턴스의 API 섹션에서 모든 API로 이동합니다.
3. 인바운드 처리 섹션에서 </> 아이콘을 선택합니다.
4. 정책 편집기에서 XML 파일의 <인바운드> 섹션에 정책을 삽입합니다. <origin> 값이 개발자 포털의 도메인과 일치해야 합니다.

참고 항목

API 범위 대신 제품 범위에 CORS를 정책하고, API에서 헤더를 통해 구독 키 인증을 사용하는 경우 콘솔이 작동하지 않습니다.

브라우저는 구독 키가 있는 헤더를 포함하지 않는 OPTIONS HTTP 요청을 자동으로 실행합니다. 구독 키 누락으로 인해 API Management는 OPTIONS 호출과 제품을 연결할 수 없어 CORS 정책을 적용할 수 없습니다.

해결 방법으로, 쿼리 매개 변수에서 구독 키를 전달할 수 있습니다.

CORS 프록시 옵션

일부 시나리오(예: API Management 게이트웨이가 네트워크 격리된 경우)의 경우 API에 대해 CORS 정책을 사용하도록 설정하는 대신 개발자 포털을 CORS 프록시 자체로 구성하도록 선택할 수 있습니다. CORS 프록시는 API Management 인스턴스의 포털 백 엔드를 통해 대화형 콘솔의 API 호출을 라우팅합니다.

참고 항목

API가 자체 호스팅 게이트웨이를 통해 노출되거나 서비스가 가상 네트워크에 있는 경우 API Management 개발자 포털의 백 엔드 서비스에서 게이트웨이로의 연결이 필요합니다.

CORS 프록시를 구성하려면 개발자 포털에 관리자 권한으로 액세스합니다.

1. API Management 인스턴스의 개요 페이지에서 개발자 포털을 선택합니다. 개발자 포털이 새 브라우저 탭에서 열립니다.
2. 관리 인터페이스의 왼쪽 메뉴에서 페이지>API>세부 정보를 선택합니다.
3. API: 세부 정보 페이지에서 작업: 세부 정보 위젯을 선택하고 위젯 편집을 선택합니다.
4. CORS 프록시 사용을 선택합니다.
5. 포털에 변경 내용을 저장하고 포털을 다시 게시합니다.

자체 호스팅 개발자 포털에 대한 CORS 구성

개발자 포털을 자체 호스팅하는 경우 CORS를 사용하도록 설정하려면 다음 구성이 필요합니다.

• 구성 파일에서 backendUrl 옵션을 사용하여 포털의 백 엔드 엔드포인트를 지정합니다. 그렇지 않으면 자체 호스팅 포털이 백 엔드 서비스의 위치를 인식하지 못합니다.

• 자체 호스팅 포털이 호스트되는 환경을 지정하는 자체 호스팅 포털 구성에 원본 도메인 값을 추가합니다. 자세한 정보

관련 콘텐츠

• 정책 구성에 대한 자세한 내용은 정책 설정 또는 편집을 참조하세요.
• CORS 정책에 대한 자세한 내용은 cors 정책 참조를 참조하세요.