Axios Header에 Access Token을 넘기는 방법은?

서론

토이프로젝트에서 Axios 통신을 사용해 Header 부분에 Access Token을 넘겨야하는 상황이 발생했다. 

오늘 포스팅에서는 Axios 통신에서 Access Token을 넘기는 방법에 대해 포스팅을 해보려고 한다.

---

프론트 단에서 백엔드로 어떻게 데이터를 넘길까?

Access Token을 header Authorization에 넣어서 * Bearer과 Token을 합쳐 보내줘야 데이터를 가져올 수 있다.

프론트 단에서 header Authorization에 넣어 백엔드로 넘기면, 백엔드에서는 Access Token을 대조하여 걸맞는 정보를 다시 넘겨준다.

 

* Bearer 이란?

정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스를 말한다.

베어러 서비스가 종합 정보 통신망에서는 사용자망 인터페이스 상호 간에 정보(음성, 음향 데이터, 영상 등)를 실시간으로 내용의 변경 없이 전달하는 방법을 제공하는 서비스를 말한다.

 

Axios의 Config를 설정해주는 방법

Axios.defaults.headers.common['Authorization'] = `Bearer {토큰명}`

그 외에 Config 파일에 관련된 부분들은 아래 링크에서 추가 참고가 가능하다

Config 기본 설정 | Axios 러닝 가이드

Axios에 Header Authorization을 직접 명시해 넘겨주는 방법

Axios.get(`API 명`,
	{
    header : {
    	Authorization : `Bearer AT(Access Token)`,
    	}
    })

참고 자료

[#. React] React에서 token이 필요한 API 요청 시 header Authorization에 Bearer token 담아서 보내기