Fetch API / Axios / CORS

Fetch API

• 웹 브라우저에서 HTTP 요청을 보내고 응답을 처리하는 기능을 제공하는 최신 API입니다. 
• fetch는 JavaScript에서 HTTP 요청을 보내기 위한 내장 함수으로 비동기 방식으로 동작하며, 프로미스를 반환하여 비동기 처리를 보다 직관적으로 할 수 있게 해줍니다.

fetch('https://api.example.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: '홍길동',
    email: 'hong@example.com'
  })
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Fetch API's Response

• fetch API가 반환하는 Response 객체는 HTTP 응답에 대한 메타데이터를 담고 있습니다. 
  • status : HTTP 상태 코드 (예: 404, 500 등)
  • statusText : 상태 코드와 관련된 설명 메시지
  • ok : 응답이 성공적인지 여부를 확인합니다 (status가 200-299 범위일 때 true)
• 그러면 body (응답 데이터) 는 어디에 있는 걸까?
  • fetch는 기본적으로 응답 본문을 "텍스트"나 "바이너리 스트림" 형식으로 제공합니다.
  • 예를 들어, JSON 형식으로 응답을 받을 때, JSON 본문을 자동으로 파싱하면 그 파싱 과정에서 발생할 수 있는 오류를 처리하기 어려울 수 있기 때문에, 개발자가 직접 파싱 메서드(json(), text(), blob() 등)를 호출하도록 하는 것입니다.

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  const jsonData = await response.json();
  console.log(jsonData);
}

Axios

• JavaScript에서 HTTP 요청을 보내기 위한 라이브러리
• 내부적으로 XMLHttpRequest 또는 fetch를 사용하여 HTTP 요청을 보내고 Promise를 반환합니다.
• fetch API보다 사용하기 쉽고 편리한 기능들을 제공합니다.
  • Axios는 응답이 JSON 형식이면 자동으로 JSON.parse()를 해주기 때문에, 응답 데이터를 쉽게 사용할 수 있습니다.
  • 요청과 응답을 가로채서 수정할 수 있는 기능을 제공하며, 예를 들어, 요청 전에 인증 토큰을 자동으로 추가할 수 있습니다.
  •  Axios는 요청에 대해 타임아웃을 설정할 수 있어 네트워크 상태가 좋지 않은 경우에 유용합니다.
  • Node.js와 브라우저 모두 지원: Axios는 브라우저뿐만 아니라 서버사이드(Node.js)에서도 동작합니다.
  • 이 외에도 다양한 기능을 제공합니다.

CORS ( Cross-Origin Resource Sharing )

• 브라우저 보안 정책인 SOP(Same-Origin Policy, 동일 출처 정책)를 우회하기 위한 메커니즘입니다.
• 즉, 출처가 다르면 리소스를 직접 요청하거나 응답을 사용할 수 없습니다. 이때 CORS를 통해 예외적으로 접근을 허용할 수 있습니다.
  • 출처가 다른 리소스를 요청하려고 하면, 브라우저는 자동으로 CORS 요청을 합니다.
  • 서버는 Access-Control-Allow-Origin 등의 헤더를 응답에 포함시켜야 합니다.
  • 브라우저는 응답의 CORS 허용 여부를 확인하고, 허용되지 않으면 JS에서 접근을 차단합니다.

Access-Control-Allow-Origin

• 서버가 어떤 출처(origin)의 요청을 허용할지를 브라우저에게 알려주는 응답(Response) 헤더입니다.
• 이 헤더가 없다면, 브라우저는 교차 출처 요청에 대해 응답을 스크립트에서 사용할 수 없도록 차단합니다.
• 보안상 제3자가 쿠키까지 가져가면 안 되므로 credentials : true인 경우에는 * 사용 할 수 없습니다.