Issue 1:
Trying to upload an image from React Native to a server with Axios. I've attached a screenshot of both the code that I'm using and the Postman form-data view so you can see what the server expects to receive (uploading via postman works perfectly so server is all good). Every time I try to upload an image I get either a status code 400 (promise rejection) error or a network error.

Here is what the image prop contains - it is directly coming from react-native-image-crop-picker :

{"cropRect": {"height": 399, "width": 221, "x": 39, "y": 0}, "height": 1949, "mime": "image/jpeg", "modificationDate": "1588072959000", "path": "file:///storage/emulated/0/Pictures/bf28f71b-86e9-485d-ae27-d2edcd07d78d.jpg", "size": 495417, "width": 1080}

Any help would be amazing! I've been stuck on this for days now and I haven't found an existing support thread with this issue, apologies though if I have managed to duplicate a query.

Issue 2:
Describe the issue

So I'm facing the following problem, I would like to recall the api called which failed because the JWT token expired (so without throwing any error if the call with valide token work) and update the axios instance axios.defaults.headers.common["Authorization"] = newToken

So currently it's working but not as expected, instead of recall once it's twice... very annoying...

Screen of the network browser's console :

(colors corresponding to the same api call)

as you can see everyone is called twice expect the first one which causing the refresh token

let client = axios;

axios.defaults.baseURL = config.backendUrl;

axios.defaults.headers.post["Content-Type"] = "application/json";

axios.interceptors.request.use(
function (config) {
const token = store.getState().User.access_token;
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
},
function (error) {
return Promise.reject(error);
}
);

axios.interceptors.response.use(
(response) => response,
(error) => {
// reject promise if network error
if (!error.response) {
store.dispatch(
//@ts-ignore
setError(
"Network connection error ! \n check your internet and try to reload"
)
);
return Promise.reject(error);
}
// Reject promise if usual error
if (error.response.status !== 401) {
return Promise.reject(error);
}

//Logout user if token refresh didn't work or user is disabled
if (error.config.url === "/auth/refresh/") {
console.log("hello refresh failed");
store.dispatch(
updateTokens({
access: "",
refresh: "",
})
);
store.dispatch(isLogout());

return new Promise((resolve, reject) => {
reject(error);
});
}

if (error.response.status === 401) {
return client
.post("/auth/refresh/", {
refresh: store.getState().User.refresh_token,
})
.then((res) => {
const newToken = res.data.access;
store.dispatch(
updateTokens({
access: res.data.access,
refresh: res.data.refresh,
})
);

console.log("error.config", error.config);
// New request with new token
const config = error.config;
config.headers["Authorization"] = `Bearer ${newToken}`;

return new Promise((resolve, reject) => {
axios
.request(config)
.then((response) => {
resolve(response);
})
.catch((error) => {
reject(error);
});
});
})
.catch((error) => {
store.dispatch(
updateTokens({
access: "",
refresh: "",
})
);
store.dispatch(isLogout());
Promise.reject(error);
});
}
}
);

I understand it like, when I get 401 I retry the api call with the new token but when I update the token inside the redux store with

store.dispatch(
updateTokens({
access: res.data.access,
refresh: res.data.refresh,
})
);

it's updating the axios instance and recall second time but with the validate token.

if I'm right I would like to know I could I fix that, thx everyone.

Expected behavior, if applicable

I expected the same result but without the duplicate calls (like only one call of each)

Environment

axios : ^0.21.0

react : ^17.0.1