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 사용 및 구성
Azure Portal에서 컨테이너 앱으로 이동합니다.
설정 메뉴에서 CORS를 선택합니다.
CORS를 사용하도록 설정하면 허용된 원본, 허용된 메서드, 허용된 헤더 및 헤더 노출에 대한 값을 추가, 편집 및 삭제할 수 있습니다.
메서드, 헤더 또는 원본에 허용되는 값을 허용하려면 *를 값으로 입력합니다.
참고 항목
명령줄을 통해 구성 설정을 업데이트하면 현재 설정을 덮어씁니다. 구성이 일관성을 유지하도록 설정하려는 새 CORS 값에 현재 설정을 통합해야 합니다.
다음 코드는 컨테이너 앱을 구성할 때 CORS 설정이 ARM 템플릿에서 사용하는 형식을 나타냅니다.
{
...
"properties": {
...
"configuration": {
...
"ingress": {
...
"corsPolicy": {
"allowCredentials": true,
"maxAge": 5000,
"allowedOrigins": ["https://example.com"],
"allowedMethods": ["GET","POST"],
"allowedHeaders": [],
"exposeHeaders": []
}
}
}
}
}