상황
리뷰 페이지를 만들고 있다. textarea 에 내용을 입력하고 input(제출) 버튼을 누르면 form 태그의 이벤트 핸들러로 POST 요청을 하는 기능을 구현해야한다.
처음에는 fetch를 사용했지만, axios 로 바꾸어서 코드를 작성했다.
axios
.post(
`${process.env.REACT_APP_API}/reviews`,
{
bookInfoId: `${bookInfoId}`,
content: `${content}`,
})
.then(function print(res) {
console.log(res);
})
.catch(function fail(error) {
console.log(error);
});이렇게 코드를 실행하고 POST 요청을 하니 에러 코드 102 가 출력됐다. 우리 프로젝트에서 에러코드 102는 쿠키가 백에 전달되지 않았을 때를 의미한다. 즉, 프론트에서 백에 API 요청을 하면서 쿠키를 함께 전달해야하는데, 전달되지 않았다는 것 같다.
어떻게 해결해야할까 알아보다, withCredentials = true; 라는 옵션을 발견했다.
해결 방법
CORS 정책이란 게 있다. CORS 정책은 우리가 가져오는 리소스들이 안전한지 검사하는 관문이다. CORS는 클라이언트에서 보낸 주소와 서버가 보내준 주소를 비교하여 차단할지 말지를 결정한다.
쉽게 말해 서버와 클라이언트가 쿠키를 공유하기 위한 정책이다.
기본적으로 브라우저가 제공하는 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다.
따라서, 요청에 인증과 관련된 정보(쿠키)를 담을 수 있게 해주는 옵션이 있는데 바로 credentials 옵션이다.
fetch를 사용하지 않고 axios를 사용할 땐 withCredentials:true 옵션을 사용하여 쿠키를 전송할 수 있다.
만약 유효하지 않다면 그 응답을 사용하지 않고 버린다. (위의 경우에는 둘다 http://localhost:4242이기 때문에 유효한 경우이다.)
await axios
.post(
`${process.env.REACT_APP_API}/reviews`,
{
bookInfoId: `${bookInfoId}`,
content: `${content}`,
},
{
withCredentials: true,
},
)
.then(function print(res) {
console.log(res);
})
.catch(function fail(error) {
console.log(error);
});
참고 자료
https://inpa.tistory.com/571
https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-CORS-%EC%BF%A0%ED%82%A4-%EC%A0%84%EC%86%A1withCredentials-%EC%98%B5%EC%85%98
https://basemenks.tistory.com/246
https://ssungkang.tistory.com/entry/React-axios-%EC%9D%98-withCredentials
