개발 중에 만난 axios 401 에러.. 처음에는 서버가 잘못된건지 뭐가 잘못된건지 계속 헤맸다.
한 두시간 넘게 계속 헤맸다가 정말 어이없게 해결했다. 이 오류 해결에 도움을 준 내 친구에게 영광을 돌린다.
사실 이 문제는 같이 오류해결을 하려고 했던 친구가 먼저 이 오류를 마주했다.
함께 찾아보다 결국 해결하지 못했는데 이 친구는 선언했던 변수명과 응답해야하는 변수명이 달라서 오류를 뱉어낸 것이었다. (내가 준 코드 때문에 변수명이 달랐음)
그래서 나도 변수명이 문제인가했지만 그럴리가 없었다. 왜냐면 나는 계속 똑같은 코드를 써왔기 때문에..
투두리스트를 만들고 axios를 이용해서 통신을 하는데 계속 오류가 발생했다.
나는 headers도 잘 넣었는데 왜 안될까..를 고민하던 와중 데이터를 보내는 곳에 withCredentials: true 를 넣어보라길래
넣어봤지만 이마저도 실패했다.
내 코드는 이러했다. 토큰값도 잘넣고 모두 다 잘 넣었는데 도대체 왜 안될까 싶어서 코드를 이리저리 고쳐도 계속 실패했다.
const api = axios.create({
baseURL: "http://localhost:8000/",
Headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});
그러던 와중에 갑자기 번뜩 스쳐간 생각이 있었는데 바로 Headers를 소문자로 고치는 것이었다.
이부분이 왜 생각났냐면 그 친구와 같이 오류를 해결하던 와중 소문자로 쓰라는 그.. 부분이 있었다..
그래서 그냥 한번 소문자로 고쳐봤는데 바로 통신을 성공했다.
수정코드
const api = axios.create({
baseURL: "http://localhost:8000/",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${localStorage.getItem("token")}`,
},
});너무 사소한 문제라 해결됐을 때 어이없었지만 어쨋거나 성공했으니 됐다..
근데 유저 로그인 할때도 똑같이 앞에는 대문자로 했을때 되었는데..뭘까
일단은 통신 성공했으니까 코드 따로 빼고 다시 시도해봐야겠다!
어쨌거나 결론은 header를 소문자로 쓰자!!!
