fetch를 사용해서 api 통신을 할 때
응답헤더에 값을 조회하며 생겼던 문제점에 대해 이야기를 해보자고 한다.
문제 상황
login을 처음에 진행했을 때 header에 authorization 값이 조회가 되지 않는 문제가 발생했다.
res.headers.authorization 를 콘솔로 찍어보았을 때 해당하는 값이 조회가 되지 않았다.
res을 조회해도 해당하는 우리가 받을 수 있을거라고 예상했던 값들이 들어있지 않았다.
여러 키워드로 구글링을 해보니 서버쪽에서 클라이언트가 접근 가능한 헤더를 별도로 설정해줄 필요가 있는데 그러한 설정이 빠져있지 않은가 하는 의문이 들었다.
그래서 백엔드 팀원분들에게 header 값을 조회를 못하고 있는데 설정을 봐줄 수 있냐고 여쭤보았다.
react-header authorization 값 받기
그랬더니 돌아오는 답변은 설정은 제대로 되어있으니 네트워크 탭을 보면 해당 하는 값들이 응답 헤더에 다 들어가 있으므로, 다른 방법으로 조회해보라는 답변을 받았다.
해결방안 1
axios로 통신하기
결국 우리는 fetch 대신에 axios를 통해서 응답 헤더에 있는 값들을 받아올 수 있었다.
해결방안 2
fetch로 통신하기
fetch로 통신할 때 headers에 접근하기 위해서 axios와는 다른 방법으로 접근해야 된다는 것을 알게 되었다.
fetch
해당 글을 참고하니 fetch에서는 headers접근하기 위해서 get을 더 첨부해서 작성해야 한다는 것이었다.
헤더 일부를 추출
alert(response.headers.get('Content-Type'));수정한 코드
받아진 값
처음에는 feth랑 axios가 통신할 때 별로 다른 점을 느끼지 못했었고 알고 있는 차이점 정도는 fetch는 라이브러리를 설치하지 않아도 된다는 장점과 promise를 반환하기 때문에 .json() 메서드를 호출해 JSON 형식의 데이터를 받아야한다는 것이다.
이번 과정을 통해서 각각의 값을 받는 방법에도 차이점이 있다는 것을 알게 되었고 프로젝트 처음에도 통신방법으로 무엇을 이용할 것인가를 무척 고민했으나 명확한 답변은 내리지 못하고 fetch를 사용하다 값을 조회하지 못해서 axios를 사용해서 통신을 했다.
사실 axios를 자주 사용했기 때문에 편리한 것은 사실이나 이것도 개인적인 선호도에 따라 달라지기도 한다.
다음 프로젝트에서는 통신방법에 대해서 조금 더 고민을 해보는 시간을 가져야겠다.
