게시글에 좋아요 버튼을 누르는 기능을 구현하고 있다.
axios post를 이용해서 parameters를 전달하고 request body는 따로 없어서 파라미터만 잘 전달하면 될 줄 알았는데 자꾸 401에러가 떴다. 처음에는 파라미터가 안넘어가는거라 생각해 console.log(postsData)로 좋아요를 누를 게시글을 확인했는데 파라미터와 post_id가 일치하였다. 따로 코드에 오타도 없어보이고....
//게시글 좋아요
const [isliked, setIsLiked] = useState(false)
const onLikeBtn = async (postId:number) => {
setIsLiked(true);
try {
const access = localStorage.getItem('accessToken');
const response = await axios.post(
`${apiUrl}/post/heart/${postId}`,
{
headers: { Authorization: `Bearer ${access}` },
}
);
const updatelikecount = postsData.likeCount+1;
setpostData({...postsData, likeCount: updatelikecount});
console.log(response.data);
} catch (error) {
alert('Error while liking post');
}
};
열심히 구글링 한 결과 어디서 틀렸는지 찾았다!!
post요청은 매개변수가 axios.post(url[, data[, config]])이다. 위에 코드에서는 url과 config가 있지만 data가 없는 상태라 headers가 첫번째 인자로 보내지고 있었다(원래는 두번째 인자, config부분으로 넘어가야 함) 생각해보니 당연한 부분이다. post는 보내는 용도이기에 data가 필수로 존재해야한다는 사실.....
그럼 그동안의 post요청은 뭐였지? 하고 작성한 코드들을 보니 전부 data가 존재했고, 나도 모르게 매개변수를 맞춰서 보내고 있던거였다. 이제라도 알아서 다행쓰,,,,
//게시글 좋아요
const [isliked, setIsLiked] = useState(false)
const onLikeBtn = async (postId:number) => {
setIsLiked(true);
try {
const access = localStorage.getItem('accessToken');
const response = await axios.post(
`${apiUrl}/post/heart/${postId}`,
{}, // axios.post(url[, data[, config]]) 이기 때문에 hearder가 두번째 인자로 가야하는데 첫번째 인자로 보내고 있었음 따로 request body가 없기때문에 빈 객체 추가
{
headers: { Authorization: `Bearer ${access}` }, // headers는 세 번째 매개변수로 전달
}
);
const updatelikecount = postsData.likeCount+1;
setpostData({...postsData, likeCount: updatelikecount});
console.log(response.data);
} catch (error) {
alert('Error while liking post');
}
};
하지만 좋아요 api는 request body가 따로 존재하지 않기때문에 { }을 넣어주고 그다음에 headers를 넣어주면 순서에 맞게 잘 보내진다!