Axios

Axios는 HTTP통신을 하는데 매우 인기있는 Js 라이브러리이다.

현업에서는 이전에 배웠던 fetch 요청 보다 더 많이 사용 된다고 한다.

Axios는 Promise에 의존하여 보통 async await을 사용 한다고 한다.

장점

• E8이상을 포함한 모든 최신 브라우저를 지원
• 구형브라우저를 지원합니다.(Fetch API의 경우는 폴리필이 필요합니다.)
• 요청을 중단시킬 수 있습니다.
• 응답 시간 초과를 설정하는 방법이 있습니다.
• CSRF 보호 기능이 내장되어있다.
• JSON 데이터 자동변환
• Node.js에서의 사용
  출처 : https://tuhbm.github.io/2019/03/21/axios/

사용법

axios({
  url: 'https://test/api/cafe/list/today',
  method: 'get',
  data: {
    foo: 'diary'
  }
});

위처럼 인자에 키:값 객체 형식으로 작성한다.
url의 값은 http 요청을 보내는 서버의 url이 온다.
method의 값은 말 그대로 요청에 사용할 HTTP 메소드가 온다.
data의 값은 optional하며, 요청을 보낼 서버의 API에서 필요한 데이터를 보낸다.
이 외에도 헤더에 실어 보낼 옵션 headers가 있다.

좀더 명시적으로 메소드를 분리하여 JQuery와 흡사한 형태로 요청을 보내는 것도 가능하다.

axios.get()
axios.post()

여기서 get요청은 첫번째 인자에 url 두번째 인자에 option(data)를 작성하고,
post는 body값을 보내줘야 하기 때문에 두번째 인자가 body가 되고,
세번째 인자가 option(data)가 된다.

//예시
axios.post('https://velog.io/@woals3000', param, {headers})

withCredentials

보안 인증 스프린트를 진행하면서 Cookie가 생성되면
자동으로 header에 실려간다고 배웠는데, cookie가 실종(?)되었을때가 있다.

이에 대해서는 CORS 정책이 잠시 등장한다.
CORS는 따른 Origin에 대한 요청을 허용하는 정책이다.
같은 Origin에서 http 통신을 하는 경우
알아서 cookie가 request header에 들어가지게 된다.
다른 Origin이 http통신을 하는 경우
request header에 쿠키가 자동으로 들어가지 않아서 직접 cookie를 넣어주어야 한다.
요청에 포함시키려면 2가지 작업을 해주면 된다고 한다.

프론트 : withCredentials : true
서버 : Access-Control-Allow-Credentials : true
요청시에 withCredentials : true를 해주고, 마찬가지로 서버의 응답헤더에 Access-Control-Allow-Credentials : true를 해주어여 합니다.

참고 사이트

https://tuhbm.github.io/2019/03/21/axios/
https://kosaf04pyh.tistory.com/152