[ERR]'AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders>' 형식에 'Authorization' 속성이 없습니다.ts(7053)

axios 1.2.2버전 이슈

instance.interceptors.request.use((config:AxiosRequestConfig) => {
	const accessToken = Cookies.get('accessToken');

	if (config.headers && accessToken) {
        config.headers!['Authorization'] = `Bearer ${accessToken}`;
    }

	return config;
});

보통 이렇게 axios interceptors를 이용해서 config header에다가 accessToken을 넣어주는데 2022-01-16일자로 axios를 설치 하게 되면 1.2.2가 설치 되어서 원래 사용하던대로 사용하니까 에러가 발생했다. 아래에 axios 1.2.2에 대한 이슈를 보면 2주전부터 발생한걸로 보이며 1.2.1 버전에선 발생하지 않는것으로 보인다.

 

[해결방법1]

axios 버전은 1.2.1로 다운그레이드 한 뒤에 npm install로 다시 설치 하고 사용 하면 잘된다.

 

[해결방법2]

위처럼 쓰기는 싫으니까 코드를 수정.

import axios, { AxiosHeaders, AxiosRequestConfig } from 'axios';

                        ...중략...
                        

instance.interceptors.request.use((config:AxiosRequestConfig) => {
	const accessToken = Cookies.get('accessToken'); //자신이 토큰 가져오는방식

	if (config.headers && accessToken) {
        config.headers = { ...config.headers } as AxiosHeaders;
        config.headers.set('Authorization', accessToken);
    }
	

	return config;
});

 

err 발생함

TypeError:config.headers.set is not a function

 

import axios, { AxiosHeaders, AxiosRequestConfig } from 'axios';

                        ...중략...
                        

instance.interceptors.request.use((config:AxiosRequestConfig) => {
	const accessToken = Cookies.get('accessToken'); //자신이 토큰 가져오는방식

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

	return config;
});

이렇게 수정해줘야 잘됨.

 

 

 

해당 axios 이슈 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