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

  • 아티클

기본적으로 브라우저를 통해 페이지의 원본 도메인과 일치하지 않는 도메인에 대한 요청은 차단됩니다. 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를 선택합니다.

    Screenshot showing how to enable CORS in the Azure portal.

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

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

참고 항목

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

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

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

다음 단계

수신 구성