도메인 간의 제한된 자원 공유를 허용하기 위해 CORS (Cross-Origin Resource Sharing)를 사용할 수 있습니다. 이는 자바스크립트로 작성된 애플리케이션이 다른 도메인의 리소스에 요청을 보내고 응답을 받을 수 있도록 해주는 보안 메커니즘입니다. 이 글에서는 CORS를 사용하여 자바스크립트에서 여러 도메인 간에 통신하는 방법을 알아보겠습니다.

CORS의 작동 원리

CORS는 브라우저의 보안 정책을 따르기 위해 작동합니다. 기본적으로 브라우저는 동일 출처 정책(Same Origin Policy)을 적용하여 한 도메인에서 로드된 자바스크립트가 다른 도메인의 리소스에 접근하는 것을 제한합니다. 하지만 CORS를 사용하면 서버에서 특정 도메인으로부터의 요청을 허용할 수 있으며, 이를 통해 도메인 간의 통신이 가능해집니다.

CORS는 클라이언트가 서버로 리소스 요청을 보낼 때 추가적인 헤더를 함께 보내는 방식으로 작동합니다. 서버는 이 헤더를 분석하여 도메인 간 요청을 허용할지 여부를 결정합니다.

CORS 사용하기

CORS를 사용하여 자바스크립트에서 여러 도메인 간에 통신하는 방법은 다음과 같습니다.

1. 서버에서 CORS 헤더 설정하기

서버에서 CORS를 사용하기 위해 응답 헤더에 다음과 같은 헤더를 추가해야 합니다:

Access-Control-Allow-Origin: <allowed-origin>

위 헤더에서 <allowed-origin>은 통신을 허용할 도메인을 나타냅니다. 이 헤더의 값으로 *를 사용하면 모든 도메인에서의 요청을 허용할 수 있습니다.

또한, 브라우저가 요청할 수 있는 다른 메서드 및 헤더를 명시적으로 설정하기 위해 다음과 같은 헤더도 추가할 수 있습니다:

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type

2. 클라이언트에서 CORS 요청 보내기

클라이언트에서 CORS 요청을 보내기 위해서는 다음과 같이 요청 헤더에 Origin 헤더를 추가해야 합니다:

fetch("https://example.com/api/data", {
  method: "GET",
  headers: {
    "Origin": "https://mydomain.com"
  }
})

위 예제에서는 fetch 함수를 사용하여 GET 요청을 보내고 있습니다. Origin 헤더에는 자신의 도메인을 지정하여 보내야 합니다.

3. 응답 확인하기

서버는 요청을 받은 후 클라이언트의 Origin 헤더와 비교하여 허용할 경우 응답에 CORS 헤더를 추가합니다. 클라이언트는 이 헤더를 확인하여 자원에 접근할 수 있는지 여부를 판단하게 됩니다.

4. 에러 처리하기

CORS 요청이 실패할 경우, 클라이언트는 오류 메시지를 받게 됩니다. 이를 처리하기 위해 try-catch 문을 사용하거나 catch 메서드를 사용하여 오류를 처리할 수 있습니다.

try {
  const response = await fetch("https://example.com/api/data");
  const data = await response.json();
  // 데이터 처리
} catch (error) {
  console.error("CORS 요청 실패:", error);
}

결론

CORS를 사용하면 자바스크립트 애플리케이션이 여러 도메인 간에 통신할 수 있습니다. 서버에서 올바른 CORS 헤더를 설정하고 클라이언트에서 요청을 보내면 도메인 간 통신이 가능해집니다. 주의할 점은 CORS를 사용할 때 보안을 위해 필요한 검증 절차를 충분히 수행해야 한다는 것입니다.

따라서, CORS를 사용하여 자바스크립트로 여러 도메인 간에 통신하는 방법을 알아보았습니다. CORS를 올바르게 구성하고 요청을 보내면 안전하게 도메인 간 통신을 할 수 있습니다.

#CORS #자바스크립트