위시리스트 찜기능 Error

Error

찜기능 시 서버통신의 에러인데, 정말 원초적인 실수를 했다.

await axios.post(`/member/wishlists?hotelId=${id}`, {
                    headers: {
                        Authorization: localStorage.getItem("accessToken"),
                    },
                });

axios로 비동기 서버 통신을 하였는데, 403 Forbidden 에러가 계속 발생하였다.

문제는 postman으로 했을 때에는 통신이 되었지만, 프로젝트 코드에서는 안 되는 상황이어서 우리 코드 잘못이라고 인지를 하고 있었지만, 해결방법은 찾지 못했다.

해결방법

axios 사용법을 제대로 숙지 못한 원초적인 실수였다.

axios.post(url[, data[, config]])

axios.post를 사용할 때에는 첫 번째 인자 url, 두 번째 인자 data, 세 번째 인자 config이다.

error 났던 코드를 다시 분석해 보면 우린 headers를 data에 담아서 보내고 있었던 것이었다.

 

첫 번째 방법

await axios({
                    method: "post",
                    url: `/member/wishlists?hotelId=${id}`,
                    headers: {
                        Authorization: localStorage.getItem("accessToken"),
                    },
                });

두 번째 방법

await axios.post(`/member/wishlists?hotelId=${id}`,undefined,{
                    headers: {
                        Authorization: localStorage.getItem("accessToken"),
                    },
                });

당연한 거라고 생각하지 말고 다시 한번 검토해 보고 배운 기술에 대해 정확하게 알고 쓰자는 교훈을 얻었다.

 

참고 https://axios-http.com/kr/docs/api_intro

Axios API | Axios Docs