웹 개발에서 동일 출처 정책(Cross-Origin Resource Sharing, CORS)는 보안을 위해 적용되는 정책 중 하나입니다. 이 정책은 웹 브라우저에서 실행되는 스크립트가 다른 도메인으로 요청을 보낼 때 보안 검사를 수행하도록 합니다. 하지만 때로는 인증된 요청이 필요한 경우가 있는데, 이는 CORS를 사용하여 해결할 수 있습니다.
CORS란?
CORS는 웹 브라우저에서 실행되는 JavaScript가 다른 도메인으로 요청을 보낼 수 있는 권한을 부여하는 메커니즘입니다. 기본적으로 모든 브라우저는 동일 출처 정책을 따르기 때문에, 다른 도메인으로 요청을 보내려면 서버 측에서 특별한 헤더를 설정해야 합니다.
인증된 요청을 보내기 위한 CORS 설정
인증된 요청을 보내기 위해서는 서버에서 CORS 관련 헤더를 설정해야 합니다. 예를 들어, 서버가 응답해야 할 도메인을 허용하는 Access-Control-Allow-Origin 헤더를 설정해야 합니다. 또한, 브라우저는 요청을 인증하는데 사용되는 토큰이나 쿠키를 서버로 보낼 수 있도록 Access-Control-Allow-Credentials 헤더도 설정해야 합니다.
자바스크립트에서는 fetch API를 사용하여 인증된 요청을 보낼 수 있습니다. 다음은 CORS 설정이 필요한 인증된 요청을 보내는 예제 코드입니다.
fetch('https://example.com/api/data', {
method: 'GET',
credentials: 'include' // 토큰이나 쿠키를 서버로 보내기 위해 `credentials` 옵션을 설정합니다.
})
.then(response => response.json())
.then(data => {
// 데이터 처리 코드
})
.catch(error => {
// 오류 처리 코드
});
위의 코드에서 fetch 함수의 URL을 실제 서버의 도메인으로 변경해야 합니다. 또한, credentials 옵션을 include로 설정하여 토큰이나 쿠키를 서버로 보낼 수 있도록 합니다.
결론
CORS를 사용하여 인증된 요청을 보내는 것은 웹 개발에서 중요한 부분입니다. 서버에서 CORS 관련 헤더를 설정하고, 자바스크립트에서는 fetch API를 사용하여 인증된 요청을 보낼 수 있습니다. 이를 통해 다른 도메인과의 통신이 필요한 상황에서도 안전하고 효율적으로 데이터를 교환할 수 있습니다.