웹 애플리케이션을 개발하거나 REST API를 사용하다 보면 서버로부터의 응답으로 3xx 상태 코드(리다이렉션)를 받을 때가 있습니다. 이 상황에서는 클라이언트가 새로운 위치로 리다이렉트되어야 합니다. 이 글에서는 TypeScript로 REST API 호출 시 발생하는 리다이렉션을 처리하는 방법에 대해 알아보겠습니다.

1. fetch API를 사용한 리다이렉션 처리

fetch API를 사용하여 REST API를 호출할 때, 리다이렉션 응답을 처리하는 방법에 대해 알아보겠습니다. 리다이렉션 상태 코드는 클라이언트 측에서 자동으로 처리되지 않기 때문에, 직접 처리해 주어야 합니다. 다음은 fetch API를 사용하여 리다이렉션 응답을 처리하는 예제입니다.

const response = await fetch('https://api.example.com/resource', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  redirect: 'follow' // 리다이렉션을 자동으로 따르도록 설정
});

if (response.redirected) {
  const redirectedResponse = await fetch(response.url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    }
  });
  // 리다이렉트된 응답 처리
}

위 예제에서는 fetch API의 redirect 옵션을 사용하여 리다이렉션을 자동으로 따르도록 설정하고, redirected 속성을 사용하여 리다이렉트 여부를 확인한 후, 리다이렉트된 경우 새로운 위치로 요청을 재전송하여 처리하고 있습니다.

2. Axios를 사용한 리다이렉션 처리

Axios는 HTTP 클라이언트 라이브러리로, Promise 기반으로 작동하여 REST API 호출에 많이 사용됩니다. Axios를 사용하여 REST API를 호출할 때, 리다이렉션 응답을 처리하는 방법은 다음과 같습니다.

import axios from 'axios';

axios.get('https://api.example.com/resource', {
  maxRedirects: 5, // 최대 리다이렉트 횟수 설정
}).then(response => {
  // 응답 처리
}).catch(error => {
  if (error.response.status >= 300 && error.response.status < 400) {
    // 리다이렉션 응답 처리
  } else {
    // 기타 오류 처리
  }
});

Axios를 사용할 때는 maxRedirects 옵션을 사용하여 최대 리다이렉트 횟수를 설정할 수 있습니다. 또한, 에러 핸들링을 통해 리다이렉션 응답을 처리할 수 있습니다.

3. 리다이렉션 처리 관련 주의사항

리다이렉션 처리 시 주의해야 할 몇 가지 사항이 있습니다.

• 무한 리다이렉션: 리다이렉션 처리 로직을 구현할 때, 무한 리다이렉션에 빠지지 않도록 주의해야 합니다. 최대 리다이렉트 횟수를 제한하는 것이 좋은 방법일 수 있습니다.
• 보안: 리다이렉션은 보안 측면에서 주의해야 하는 부분이 많습니다. 신뢰되지 않는 소스에서 리다이렉트된 URL을 사용하는 경우 보안상의 위협이 될 수 있습니다.

리다이렉션은 HTTP 통신에서 중요한 요소이며, 올바르게 처리하도록 주의해야 합니다.

이상으로 TypeScript를 사용하여 REST API 호출 시 리다이렉션을 처리하는 방법에 대해 알아보았습니다.

참고 문헌:

• MDN Web Docs - Fetch API
• Axios Documentation