다음을 통해 공유

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

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

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

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

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

필수 조건

API Management 인스턴스로 이동

  1. Azure 포털에서 API Management 서비스를 검색하고 선택합니다.

    검색 결과에서 API Management 서비스를 보여 주는 스크린샷

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

    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 정책의 상태를 확인할 위치를 보여 주는 스크린샷

수동으로 CORS 정책 사용

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

비고

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

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

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

사용자 지정 도메인 이름에 대한 CORS 구성

개발자 포털에 대한 사용자 지정 도메인 을 구성하고 방문자가 API 참조 페이지에서 테스트 콘솔을 사용하도록 하려면 사용자 지정 개발자 포털 도메인 이름에 CORS를 사용하도록 설정해야 합니다.

사용자 지정 도메인을 구성할 때 CORS 정책에서 사용자 지정 개발자 포털 도메인에 대한 원본을 추가하는 설정을 사용하도록 설정할 수 있습니다. CORS가 기본 도메인에 대해 이미 사용하도록 설정된 경우 두 원본이 모두 CORS 정책에 포함됩니다. 언제든지 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 정책 참조를 보세요.