En mi aplicación Reactjs, quiero agregar un interceptor que pueda agregar algunos encabezados a algunas respuestas de back-end
Entonces, probé esto:
export default function App() { axios.interceptors.response.use( (config)=> { config.headers['myheader'] = 'myvalue'; // <-- THIS IS MY CUSTOM HEADERS return config; }, (error) => { // ON ERREOR }) ...... );Y supongo que así mi encabezado se agregaría en cada respuesta de back-end. Pero eso no parece funcionar.
Sugerencias ??
Añadir un interceptor de solicitudes
axios.interceptors.request.use( config => { const token = localStorage.getItem('auth_token'); if (token) { config.headers['Authorization'] = 'Bearer ' + token; } config.headers['Content-Type'] = 'application/json'; return config; }, error => { Promise.reject(error) });Agregar un interceptor de respuesta
axios.interceptors.response.use((response) => { // block to handle success case return response }, function (error) { // block to handle error case const originalRequest = error.config; if (error.response.status === 401 && originalRequest.url === 'http://dummydomain.com/auth/token') { // Added this condition to avoid infinite loop // Redirect to any unauthorised route to avoid infinite loop... return Promise.reject(error); } if (error.response.status === 401 && !originalRequest._retry) { // Code inside this block will refresh the auth token originalRequest._retry = true; const refreshToken = 'xxxxxxxxxx'; // Write the logic or call here the function which is having the login to refresh the token. return axios.post('/auth/token', { "refresh_token": refreshToken }) .then(res => { if (res.status === 201) { localStorage.setItem('auth_token',res.data); axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('auth_token'); return axios(originalRequest); } }) } return Promise.reject(error); });Haga clic aquí para ver el tema en detalle.
Prueba esto:
axios.interceptors.response.use( function (response) { const edited_response = response; edited_response.headers["custom_header"] = "test"; return edited_response; }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error return Promise.reject(error); } );Oye, la razón por la que no funciona porque estás llamando al método de uso para actualizar los encabezados de respuesta, pero para poder enviar encabezados a tu API de back-end, debes llamar al método de uso desde el objeto de solicitud . Así es como puedes hacerlo:
axios.interceptors.request.use( function handleRequestInterceptor(config) { const modifiedConfig = { ...config, headers: { myheader: "myvalue", <=== your custom headers like auth etc. ...config.headers, }, }; return modifiedConfig; }, function handleRequestInterceptorError(error) { return Promise.reject(error); } );