Axios
HTTP통신을 주고받을 수 있게 도와주는 비동기 통신 라이브러리.
권한 문제로 사내 서버 A 에서 서버 B의 API를 사용해야하는 기능이 필요해 백엔드 서버간의 통신은 어떻게 이루어지는지 알아보다가 axios를 사용하게 됐다. 기존의 request 라이브러리는 deprecated 상태로 더 이상 사용이 권장되지 않아 Node js 기반의 서버들은 보통 axios나 superagent같은 새로운 라이브러리를 사용한다고 한다. request 라이브러리는 비동기 통신이 지원되지 않는데 비해 새로 생긴 라이브러리들은 비동기 통신을 지원한다!
method
get, post, put, patch, delete 등 모든 HTTP 요청 메소드를 지원한다. 이번 기능에서는 post 메소드를 사용했다.
1
2
3
4
5
6
7
8
9
10
11
12
13
// POST 요청 전송
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {
Authorization: "token"
}
});
request 의 body에 data를 담고 post 메소드에 url로 요청을 한다.
헤더에 토큰을 넣어 전달해야했으므로 헤더의 Authorization을 추가했다.
1
2
3
4
5
6
7
8
9
10
11
const result = await axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
headers: {
Authorization: "token"
}
});
요청에 대한 응답을 변수에 담을 수 있으며 async, await을 사용해 비동기 방식으로 사용할 수도 있다.
CORS
cors문제가 생길까 싶었는데 브라우저가 아닌 서버에서 요청메세지를 보낼 땐 헤더에 origin이 담기지 않는다고 해서 따로 설정하진 않았다. 헤더의 origin은 브라우저 단에서 추가하는 데이터로 프론트 개발과정에선 전혀 관여하지 않는다고 한다!