CORS (Cross-Origin Resource Sharing)는 웹 브라우저에서 발생하는 보안 정책으로, 웹 애플리케이션에서 다른 도메인의 리소스에 접근하는 것을 제어합니다. 이를 통해 타사 API를 활용할 수 있습니다.

CORS가 필요한 이유

기본적으로 브라우저는 같은 출처 (Origin)에만 요청을 보낼 수 있도록 제한합니다. 출처는 프로토콜, 도메인 및 포트로 구성되며, 두 출처가 다르면 CORS가 필요합니다. 따라서 다른 도메인에 위치한 API에 접근하려면 CORS를 구성해야 합니다.

CORS 구성 방법

CORS를 사용하여 타사 API에 접근하려면, 다음의 단계를 따르면 됩니다.

1. 요청 헤더에 Origin 추가

타사 API에 요청할 때, 요청 헤더에 Origin 값을 추가해야 합니다. 이는 현재 도메인의 출처를 나타내는 것으로, 타사 API에서 이를 확인하여 CORS를 허용할 것인지 결정합니다.

2. 응답 헤더에 CORS 설정 추가

타사 API에서 올바른 응답 헤더를 설정해야 합니다. 다음은 일반적으로 사용되는 CORS 헤더의 예입니다.

Access-Control-Allow-Origin: <원하는 도메인>
Access-Control-Allow-Methods: <허용하는 메서드>
Access-Control-Allow-Headers: <허용하는 헤더>
Access-Control-Max-Age: <CORS 전환 시간>

Access-Control-Allow-Origin 헤더는 CORS를 허용하는 도메인을 명시합니다. Access-Control-Allow-Methods 헤더는 허용하는 HTTP 메서드를 명시하며, Access-Control-Allow-Headers 헤더는 허용하는 요청 헤더를 명시합니다. Access-Control-Max-Age 헤더는 CORS 전환 시간을 설정하는데, 이는 브라우저가 미리 알고 있기 때문에 불필요한 OPTIONS 요청을 줄여줍니다.

3. withCredentials를 사용하여 인증정보 전달

만약 타사 API에 인증정보를 전달해야 하는 경우, 요청에 withCredentials 속성을 설정해야 합니다. 이는 브라우저에서 쿠키와 같은 인증정보를 자동으로 처리하도록 도와줍니다.

xhr.withCredentials = true;

4. API 호출

위의 단계를 완료한 후에는, 자바스크립트 코드에서 타사 API를 요청할 수 있습니다. fetch, XMLHttpRequest 등의 방법을 사용하여 API를 호출할 수 있습니다.

fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
        'Origin': 'https://www.mysite.com'
    },
    mode: 'cors',
    credentials: 'include'
})
.then(response => {
    // API 응답 처리
})
.catch(error => {
    // 에러 처리
});

요약

CORS를 사용하여 타사 API를 활용하기 위해서는 요청에 Origin 헤더를 추가하고, API 응답에 CORS 설정을 추가해야 합니다. 또한, 인증정보를 전달해야 하는 경우에는 withCredentials 속성을 설정해야 합니다. 이를 통해 자바스크립트에서 타사 API를 안전하게 사용할 수 있습니다.

#javascript #CORS