[React] HTTP 401 Unauthorized (feat. axios)

React 프로젝트를 진행하는 도중 axios를 통한 api 요청에서 401 에러가 리턴되었다.
이전까지 사용하던 api 중 get과 post method는 401에러 없이 잘 작동되었는데 put method에서만 에러가 나는 상황이였다. 다른 개발자가 작성한 프로젝트를 이어받아서 시작한 상황이였기 때문에 코드를 자세히 분석하지 못한 부분이 있었는데 그 부분을 너무 간과한거같았다.

401 에러 리턴

axios.put()

	axios.put(`url`,{
		headers: {
            'Content-Type': 'application/json',
            'Authorization': 'token',
        },
        withCredentials:true,
    }).then((resp) => {
			,,,
    }).catch((err) => {
        	,,,
   	});

api를 호출하기전 token에 토큰 정보가 잘 들어가는지 확인하기 위해 로그도 찍어보고 토큰이 있을때만 api를 보내는 식으로 코드를 변경하기도 해보았는데 서버에서는 토큰이 undefined로 인식되면서 401 에러를 자꾸 뱉어냈다..

보통 이런 경우에는 서버에서 put method에 대한 권한이나 CORS정책에 대한 이슈가 많았는데 그 부분을 백엔드 개발자분께 설명드렸더니 한번 알아본다고 하셨다.

Config 기본 설정

모든 요청에 ​​적용될 구성 기본(Config Defaults) 값을 지정할 수 있는 글로벌 axios 기본(defaults) 설정

이후에 구글링과 함께 코드를 보던중 aixos의 defaults값을 지정해서 보낼수있는 설정을 보았고
전에 작성되었던 코드에도 get,post에 대해서만 기본 설정이 되어있는것을 보았다.

axios.defaults.headers.put.token = '토큰정보';
	,,,
    //put method api 호출
	axios.put(`url`,{
		,,,
   	});

이런식으로 put method를 요청하기전에 axios의 headers에 기본값으로 토큰을 넣어서 보내자 401 에러없이 요청이 잘 가는것을 확인할 수 있었다.

참조 링크

https://yamoo9.github.io/axios/guide/config-defaults.html#%EA%B8%80%EB%A1%9C%EB%B2%8C-axios-%EA%B8%B0%EB%B3%B8-defaults-%EC%84%A4%EC%A0%95