CORS
필수 종속성: io.ktor:ktor-server-cors
코드 예시: cors
서버가 교차 출처 요청을 처리해야 하는 경우, CORS Ktor 플러그인을 설치하고 구성해야 합니다. 이 플러그인을 사용하면 허용된 호스트, HTTP 메서드, 클라이언트가 설정한 헤더 등을 구성할 수 있습니다.
종속성 추가
CORS
을(를) 사용하려면 빌드 스크립트에 ktor-server-cors
아티팩트를 포함해야 합니다:
CORS 설치
애플리케이션에 CORS
플러그인을 설치하려면, 지정된
install
함수에 플러그인을 전달합니다. 다음 코드 스니펫은 CORS
을(를) 설치하는 방법을 보여줍니다... - ...
embeddedServer
함수 호출 내부. - ...
Application
클래스의 확장 함수로 명시적으로 정의된module
내부.
CORS
플러그인은 특정 라우트에 설치할 수도 있습니다. 이는 애플리케이션의 다양한 리소스에 대해 다른 CORS
구성이 필요한 경우 유용할 수 있습니다.
특정 라우트에
CORS
플러그인을 설치하는 경우, 해당 라우트에options
핸들러를 추가해야 합니다. 이를 통해 Ktor는 CORS 프리플라이트 요청에 올바르게 응답할 수 있습니다.
CORS 구성
CORS 관련 구성 설정은 CORSConfig 클래스에서 제공됩니다. 이러한 설정을 구성하는 방법을 살펴보겠습니다.
개요
8080
포트에서 수신 대기하며 /customer
라우트가 JSON 데이터를 응답하는 서버가 있다고 가정해 봅시다. 아래 코드 스니펫은 다른 포트에서 실행 중인 클라이언트가 Fetch API를 사용하여 교차 출처 요청을 수행하는 샘플 요청을 보여줍니다:
function saveCustomer() {
fetch('http://0.0.0.0:8080/customer',
{
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
method: "POST",
body: JSON.stringify({id: 3, firstName: "Jet", lastName: "Brains"})
})
.then(response => response.text())
.then(data => {
console.log('Success:', data);
alert(data);
})
.catch((error) => {
console.error('Error:', error);
});
}
백엔드에서 이러한 요청을 허용하려면 다음과 같이 CORS
플러그인을 구성해야 합니다:
install(CORS) {
allowHost("0.0.0.0:8081")
allowHeader(HttpHeaders.ContentType)
}
전체 예시는 다음에서 찾을 수 있습니다: cors.
호스트
교차 출처 요청을 할 수 있는 허용된 호스트를 지정하려면 allowHost
함수를 사용합니다. 호스트 이름 외에 포트 번호, 서브 도메인 목록 또는 지원되는 HTTP 스키마를 지정할 수 있습니다.
install(CORS) {
allowHost("client-host")
allowHost("client-host:8081")
allowHost("client-host", subDomains = listOf("en", "de", "es"))
allowHost("client-host", schemes = listOf("http", "https"))
}
어떤 호스트에서든 교차 출처 요청을 허용하려면 anyHost
함수를 사용합니다.
install(CORS) {
anyHost()
}
HTTP 메서드
기본적으로 CORS
플러그인은 GET
, POST
및 HEAD
HTTP 메서드를 허용합니다. 추가 메서드를 추가하려면 allowMethod
함수를 사용합니다.
install(CORS) {
allowMethod(HttpMethod.Options)
allowMethod(HttpMethod.Put)
allowMethod(HttpMethod.Patch)
allowMethod(HttpMethod.Delete)
}
헤더 허용
기본적으로 CORS
플러그인은 Access-Control-Allow-Headers
에 의해 관리되는 다음 클라이언트 헤더를 허용합니다:
Accept
Accept-Language
Content-Language
추가 헤더를 허용하려면 allowHeader
함수를 사용합니다.
install(CORS) {
allowHeader(HttpHeaders.ContentType)
allowHeader(HttpHeaders.Authorization)
}
사용자 정의 헤더를 허용하려면 allowHeaders
또는 allowHeadersPrefixed
함수를 사용합니다. 예를 들어, 아래 코드 스니펫은 custom-
으로 시작하는 헤더를 허용하는 방법을 보여줍니다.
install(CORS) {
allowHeadersPrefixed("custom-")
}
allowHeaders
또는allowHeadersPrefixed
는 비단순(non-simple) 콘텐츠 타입에 대해 allowNonSimpleContentTypes 속성을true
로 설정해야 합니다.
헤더 노출
Access-Control-Expose-Headers
헤더는 브라우저의 JavaScript가 액세스할 수 있는 허용 목록에 지정된 헤더를 추가합니다. 이러한 헤더를 구성하려면 exposeHeader
함수를 사용합니다.
install(CORS) {
// ...
exposeHeader("X-My-Custom-Header")
exposeHeader("X-Another-Custom-Header")
}
자격 증명
기본적으로 브라우저는 교차 출처 요청 시 자격 증명 정보(예: 쿠키 또는 인증 정보)를 전송하지 않습니다. 이 정보를 전달할 수 있도록 하려면 allowCredentials
속성을 사용하여 Access-Control-Allow-Credentials
응답 헤더를 true
로 설정합니다.
install(CORS) {
allowCredentials = true
}
기타
CORS
플러그인을 사용하면 다른 CORS 관련 설정도 지정할 수 있습니다. 예를 들어, maxAgeInSeconds
를 사용하여 프리플라이트 요청에 대한 응답이 다음 프리플라이트 요청을 보내지 않고 얼마나 오래 캐시될 수 있는지 지정할 수 있습니다.
install(CORS) {
maxAgeInSeconds = 3600
}
다른 구성 옵션은 CORSConfig에서 확인할 수 있습니다.