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