error.response is undefined
I'm trying to figure out if the issue lies within my code or the server. If the error status is 401, I will fetch a new token using the refresh token. For error statuses like 500, I will direct users to the error page.
export const authClient = axios.create({
baseURL: BASE_URL,
headers: {
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS",
"Access-Control-Allow-Credentials": "include",
withCredentials: true,
},
});
authClient.interceptors.request.use(
(config) => {
const accessToken = getAccessToken();
if (accessToken && config.headers) {
config.headers.Authorization = `Bearer ${accessToken}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
authClient.interceptors.response.use(
async (response) => {
return response;
},
async (error) => {
const originalRequest = error.config;
try {
const newAccessToken = await getNewTokens().catch((tokenError) => {
throw tokenError;
});
if (newAccessToken) {
originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
return authClient(originalRequest);
}
} catch (refreshError) {
return Promise.reject(refreshError);
}
window.location.href = "/error";
return Promise.reject(error);
}
);
I intend to implement this functionality after encountering an error response.
Currently, I am only receiving AxiosError : NetworkError