영어로 읽기

다음을 통해 공유


Azure Container Apps에 대한 CORS(원본 간 리소스 공유) 구성

Azure와 상호 작용하는 방법 선택

기본적으로 브라우저를 통해 페이지의 원본 도메인과 일치하지 않는 도메인에 대한 요청은 차단됩니다. Container Apps에 배포된 서비스에 대한 이러한 제한을 방지하려면 CORS를 사용하도록 설정하면 됩니다.

이 문서에서는 컨테이너 앱에서 CORS를 사용하도록 설정하고 구성하는 방법을 보여 줍니다.

CORS를 사용하도록 설정하면 다음 설정을 구성할 수 있습니다.

설정 설명
자격 증명 허용 Access-Control-Allow-Credentials 헤더를 반환할지 여부를 나타냅니다.
최대 기간 CORS 플라이트 전 요청의 결과를 캐시할 수 있는 시간(초)을 나타내도록 Access-Control-Max-Age 응답 헤더를 구성합니다.
허용된 원본 원본 간 요청에 허용되는 원본 목록(예: https://www.contoso.com). Access-Control-Allow-Origin 응답 헤더를 제어합니다. *를 사용하여 모두 허용합니다.
허용된 메서드 원본 간 요청에 허용되는 HTTP 요청 메서드 목록입니다. Access-Control-Allow-Methods 응답 헤더를 제어합니다. *를 사용하여 모두 허용합니다.
허용된 헤더 원본 간 요청에 허용되는 헤더 목록입니다. Access-Control-Allow-Headers 응답 헤더를 제어합니다. *를 사용하여 모두 허용합니다.
헤더 노출 기본적으로 모든 응답 헤더가 원본 간 요청에서 클라이언트 쪽 JavaScript 코드에 노출되는 것은 아닙니다. 노출된 헤더는 서버가 응답에 포함할 수 있는 추가 헤더입니다. Access-Control-Expose-Headers 응답 헤더를 제어합니다. *를 사용하여 모두 노출합니다.
속성 설명 Type
allowCredentials Access-Control-Allow-Credentials 헤더를 반환할지 여부를 나타냅니다. 부울 값
maxAge CORS 플라이트 전 요청의 결과를 캐시할 수 있는 시간(초)을 나타내도록 Access-Control-Max-Age 응답 헤더를 구성합니다. 정수
allowedOrigins 원본 간 요청에 허용되는 원본 목록(예: https://www.contoso.com). Access-Control-Allow-Origin 응답 헤더를 제어합니다. *를 사용하여 모두 허용합니다. 문자열 배열
allowedMethods 원본 간 요청에 허용되는 HTTP 요청 메서드 목록입니다. Access-Control-Allow-Methods 응답 헤더를 제어합니다. *를 사용하여 모두 허용합니다. 문자열 배열
allowedHeaders 원본 간 요청에 허용되는 헤더 목록입니다. Access-Control-Allow-Headers 응답 헤더를 제어합니다. *를 사용하여 모두 허용합니다. 문자열 배열
exposeHeaders 기본적으로 모든 응답 헤더가 원본 간 요청에서 클라이언트 쪽 JavaScript 코드에 노출되는 것은 아닙니다. 노출된 헤더는 서버가 응답에 포함할 수 있는 추가 헤더입니다. Access-Control-Expose-Headers 응답 헤더를 제어합니다. *를 사용하여 모두 노출합니다. 문자열 배열

자세한 내용은 유효한 페치 요청의 HTTP 응답에 대한 WHATWG(Web Hypertext Application Technology Working Group) 참조를 참조하세요.

CORS 사용 및 구성

  1. Azure Portal에서 컨테이너 앱으로 이동합니다.

  2. 설정 메뉴에서 CORS를 선택합니다.

    Azure Portal에서 CORS를 사용하도록 설정하는 방법을 보여 주는 스크린샷

CORS를 사용하도록 설정하면 허용된 원본, 허용된 메서드, 허용된 헤더헤더 노출에 대한 값을 추가, 편집 및 삭제할 수 있습니다.

메서드, 헤더 또는 원본에 허용되는 값을 허용하려면 *를 값으로 입력합니다.

참고

명령줄을 통해 구성 설정을 업데이트하면 현재 설정을 덮어씁니다. 구성이 일관성을 유지하도록 설정하려는 새 CORS 값에 현재 설정을 통합해야 합니다.

다음 코드는 컨테이너 앱을 구성할 때 CORS 설정이 ARM 템플릿에서 사용하는 형식을 나타냅니다.

{ 
  ... 
  "properties": { 
      ... 
      "configuration": { 
         ... 
          "ingress": { 
              ... 
              "corsPolicy": { 
                "allowCredentials": true,
                "maxAge": 5000,
                "allowedOrigins": ["https://example.com"], 
                "allowedMethods": ["GET","POST"], 
                "allowedHeaders": [], 
                "exposeHeaders": []
              } 
          } 
      } 
  } 
}

다음 단계