1. 백엔드 서버와 연결하기

진행 상황

• 클라이언트와 서버 연결

진행 예정

• 배포

2. TIL

bearer token - 500번 에러

bearer token 요청 헤더에 보내기

백엔드의 서버 구현이 완료되어서 연결을 하다보니 500번 에러를 많이 보게 되었다. 작성, 수정, 삭제는 토큰 값이 있는 사람만 가능하도록 구현을 해서 사전에 json server auth로 테스트 했을 때는 로컬스토리지를 사용해서 토큰값이 있으면 작성, 수정, 삭제가 가능하도록 구현했다. 하지만 실제 서버와 연결하니 작성, 수정, 삭제가 실패하고 500번 에러가 떴다.

시도한 방법

백엔드분들과 대화를 하다보니 토큰값을 같이 보내줘야한다는 것을 알게되었다. 그리고 콘솔을 찍어보니 토큰의 경로도 달라서 로컬스토리지를 수정하지 않은 것도 문제였었다.

localStorage.setItem('accessToken', res.headers.authorization);
const token = localStorage.getItem('accessToken');

로컬스토리지에 토큰이 제대로 들어가는 것을 확인하고, axios에는 토큰을 같이 포함하여 post 요청을 하도록 수정하였다.

    axios
      .post('http://125.176.52.40:8080/comment',{
          questionId: id,
          content: comment,
          Authorization: token,
        },
      )

해결 방법

위와 같이 작성하였지만 또 다시 500번 에러가 떴었다. 구글링을 해보니 바디가 아니라 헤더에 보내야 하는 것을 알았다. 헤더에 담아서 보내려면 세 번째 인자로 헤더를 설정하여 보내줄 수 있다는 것을 알게되었다. 헤더에 토큰을 넣어서 보내주니 post가 잘 되는 것을 확인할 수 있었다.

    axios
      .post('http://125.176.52.40:8080/comment',{
          questionId: id,
          content: comment,
        },
        {
          headers: {
            Authorization: token,
          },
        },