Axios interceptors를 이용하여 headers를 설정하면서 발생했던 에러에 대해 설명합니다.
에러 발생
다음과 같이 설정할 경우, config.headers is possibly undefined 에러가 발생합니다.
import axios, { AxiosRequestConfig } from 'axios';
import { BASE_URL } from '../constants';
const axiosConfig: AxiosRequestConfig = {
baseURL: BASE_URL,
};
const client = axios.create(axiosConfig);
client.interceptors.request.use(async (config) => {
...
config.headers.common['Client-Application'] = 'APPLICATION';
return config;
});
export default client;Error message
- 'config.headers'은(는) 'undefined'일 수 있습니다.ts(18048)
- '"Client-Application"' 형식의 식을 'string | number | boolean' 인덱스 형식에 사용할 수 없으므로 요소에 암시적으로 'any' 형식이 있습니다.
'string | number | boolean' 형식에 'Client-Application' 속성이 없습니다.ts(7053)
발생 원인
config.headers는 AxiosRequestHeaders 또는 undefined 타입입니다.
따라서, config.headers가 undefined 일 때 접근하면 위와 같은 에러가 발생합니다.
(property) AxiosRequestConfig<any>.headers?: AxiosRequestHeaders | undefined해결 방법
다른 방법이 있지만 저는 다음과 같은 방법을 적용해서 해결했습니다.
다른 방법에 대해서는 아래의 참고 링크를 통해 확인해주세요.
client.interceptors.request.use(async (config) => {
...
config.headers = {
'Client-Application': 'APPLICATION',
...
};
return config;
});참고
