Este es mi Axios global
import axios from 'axios'; import { storage } from 'containers/login/utils/local-storage'; const token = storage.getToken(); const axiosInstance = axios.create({ baseURL: process.env.REACT_APP_API_URL, }); axiosInstance.interceptors.response.use((response) => { response.config.headers = { Authorization: `Bearer ${token}`, }; return response; }, (error) => Promise.reject(error)); axiosInstance.interceptors.request.use((request) => { request.headers = { Authorization: `Bearer ${token}`, }; return request; }, (error) => Promise.reject(error)); export default axiosInstance; En esta solicitud, necesito agregar un nuevo encabezado: invoiceLimit = `${-invoiceLimit}`
export const updateInvoiceLimit = async ( invoiceLimit: string, ) : Promise<ReturnDataType> => { let result: ReturnDataType = {} as ReturnDataType; try { axios.defaults.headers.common.invoiceLimit = `${-invoiceLimit}`; result = await axios.put(`${CREDITS_URL.CREDITS}/invoice/limit`); return result; } catch (error) { SnackBarUtils.error(`${(error as Error).message}. ${result.data.message}`); } return result; }; Cuando uso esto: axios.defaults.headers.common.invoiceLimit = `${-invoiceLimit}`;
El encabezado se agrega a los valores predeterminados de Axios, pero luego, cuando llamo a axios.put, este encabezado personalizado desaparece y deja solo el encabezado global de los interceptores.
Sé que no es la mejor práctica, pero su API de cliente y no quiero crear otra instancia de Axios sino usar una instancia global.
Creo que el problema está aquí:
axiosInstance.interceptors.request.use((request) => { request.headers = { Authorization: `Bearer ${token}`, }; return request; }, (error) => Promise.reject(error));Está anulando todos los encabezados de solicitud con solo este:
{ Authorization: `Bearer ${token}` }Así que intente distribuir encabezados antes de agregar uno nuevo como este:
axiosInstance.interceptors.request.use((request) => { request.headers = { ...request.headers, Authorization: `Bearer ${token}`, }; return request; }, (error) => Promise.reject(error));¿Esto resolvió el problema?
Pensé que podría reutilizar la instancia inicial axiosInstance y los encabezados se fusionarán cuando lo haga:
await axios.put(`${CREDITS_URL.CREDITS}/invoice/limit`,{}, { headers: { invoiceLimit: `${-invoiceLimit}` } })