이 문서에서는 한 도메인에서 실행되는 컨테이너 앱에서 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 응답 헤더를 제어합니다. *를 사용하여 모두 노출합니다. |
| 재산 | 설명 | 유형 |
|---|---|---|
allowCredentials |
Access-Control-Allow-Credentials 헤더를 반환할지 여부를 나타냅니다. |
boolean |
maxAge |
CORS 플라이트 전 요청의 결과를 캐시할 수 있는 시간(초)을 나타내도록 Access-Control-Max-Age 응답 헤더를 구성합니다. |
integer |
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": []
}
}
}
}
}