Property 'Authorization' does not exist on type 'AxiosHeaders'

현재 프로젝트에서 jwt를 사용하고 있기 때문에 axios interceptor를 이용해서 토큰에 따라 request 헤더 설정을 해주어야한다.

 

아래와 같이 interceptor를 설정하였다.

axios.interceptors.request.use((request) => {
    request.headers
        ? (request.headers.Authorization = `Bearer ${token}`)
        : (request.headers = { Authorization: `Bearer ${token}` });
});

// 또는 
axios.interceptors.request.use((request) => {
  if (request.headers) {
    request.headers.Authorization = `Bearer ${token}`
  }
});

 

Bearer 토큰 값으로 헤더를 설정하는 부분인 config.headers.Authorization에서 아래와 같은 에러가 발생한다.

 

TS2339: Property 'Authorization' does not exist on type 'AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders>'. Property 'Authorization' does not exist on type 'AxiosHeaders'.

 

axios 1.2.2 버전의 버그로 headers 타입이 깨진 버그 현상이었다.

 

https://github.com/axios/axios/issues/5416

Property 'Authorization' does not exists on type 'AxiosHeaders' after upgrade to 1.2.2 · Issue #5416 · axios/axios

 

답변 내용에 따르면 현재 axios 1.2.3 버전에서 이 문제를 해결했다.

 

1.2.3 버전에서는

- AxiosRequestConfig → RawAxiosRequestConfig 인터페이스로 변경하였고

- AxiosRequestConfig를 RawAxiosRequestConfig의 서브인터페이스로 추가해서 문제를 해결했다.

 

 

프로젝트에서 사용하고 있는 axios 버전은 1.2.2 버전이기 때문에 1.2.3으로 업그레이드 하려고 했으나

현재 글 작성일 기준으로는 npm에는 1.2.2. 버전만 존재한다.

 

(axios 깃허브에는 1.2.3 버전이 분명 릴리즈 되었는데 .. )

 

해결

임시 해결책으로는  headers의 타입을 AxiosHeader로 설정해주는 방법이 있다.

config.headers = { ...config.headers } as AxiosHeaders;
config.headers.set('Authorization', `Bearer ${token}`);

또는 아래와 같이 해결할 수 있다.

const headers = { ...config.headers } as Partial<AxiosRequestHeaders>;

headers['Authorization'] = `Bearer ${token}`;

 

참고

- https://github.com/axios/axios/pull/5420

fix(types): fixed AxiosRequestConfig header interface by refactoring it to RawAxiosRequestConfig; by DigitalBrainJS · Pull Requ