<p dir="auto">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.</p>
<p dir="auto">Here is what the image prop contains - it is directly coming from react-native-image-crop-picker :<br>
{"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}</p>
<p dir="auto">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.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/45561476/80496189-c00a7d00-8960-11ea-8943-a9822b0678dc.png"><img src="https://user-images.githubusercontent.com/45561476/80496189-c00a7d00-8960-11ea-8943-a9822b0678dc.png" alt="1" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/45561476/80496190-c13baa00-8960-11ea-8008-c53134cbd149.png"><img src="https://user-images.githubusercontent.com/45561476/80496190-c13baa00-8960-11ea-8008-c53134cbd149.png" alt="2" style="max-width: 100%;"></a></p>
<h4 dir="auto">Describe the issue</h4>
<p dir="auto">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 <code class="notranslate">axios.defaults.headers.common["Authorization"] = newToken</code></p>
<p dir="auto">So currently it's working but not as expected, instead of recall once it's twice... very annoying...</p>
<p dir="auto">Screen of the network browser's console :<br>
(colors corresponding to the same api call)</p>
<p dir="auto"><a href="https://i.stack.imgur.com/rRtbm.png" rel="nofollow"><img src="https://camo.githubusercontent.com/0026481e7350f39e785fbc09b397bbba75c1c2302ab842dc6577c76a70fc98fb/68747470733a2f2f692e737461636b2e696d6775722e636f6d2f725274626d2e706e67" alt="enter image description here" data-canonical-src="https://i.stack.imgur.com/rRtbm.png" style="max-width: 100%;"></a></p>
<p dir="auto">as you can see everyone is called twice expect the first one which causing the refresh token</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="
let client = axios;

axios.defaults.baseURL = config.backendUrl;

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

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) =&gt; response,
  (error) =&gt; {
    // reject promise if network error
    if (!error.response) {
      store.dispatch(
        //@ts-ignore
        setError(
          &quot;Network connection error ! \n check your internet and try to reload&quot;
        )
      );
      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 === &quot;/auth/refresh/&quot;) {
      console.log(&quot;hello refresh failed&quot;);
      store.dispatch(
        updateTokens({
          access: &quot;&quot;,
          refresh: &quot;&quot;,
        })
      );
      store.dispatch(isLogout());

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

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

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

          return new Promise((resolve, reject) =&gt; {
            axios
              .request(config)
              .then((response) =&gt; {
                resolve(response);
              })
              .catch((error) =&gt; {
                reject(error);
              });
          });
        })
        .catch((error) =&gt; {
          store.dispatch(
            updateTokens({
              access: &quot;&quot;,
              refresh: &quot;&quot;,
            })
          );
          store.dispatch(isLogout());
          Promise.reject(error);
        });
    }
  }
);"><pre class="notranslate"><span class="pl-k">let</span> <span class="pl-s1">client</span> <span class="pl-c1">=</span> <span class="pl-s1">axios</span><span class="pl-kos">;</span>

<span class="pl-s1">axios</span><span class="pl-kos">.</span><span class="pl-c1">defaults</span><span class="pl-kos">.</span><span class="pl-c1">baseURL</span> <span class="pl-c1">=</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">backendUrl</span><span class="pl-kos">;</span>

<span class="pl-s1">axios</span><span class="pl-kos">.</span><span class="pl-c1">defaults</span><span class="pl-kos">.</span><span class="pl-c1">headers</span><span class="pl-kos">.</span><span class="pl-c1">post</span><span class="pl-kos">[</span><span class="pl-s">"Content-Type"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s">"application/json"</span><span class="pl-kos">;</span>

<span class="pl-s1">axios</span><span class="pl-kos">.</span><span class="pl-c1">interceptors</span><span class="pl-kos">.</span><span class="pl-c1">request</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span>
  <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">token</span> <span class="pl-c1">=</span> <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">getState</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">User</span><span class="pl-kos">.</span><span class="pl-c1">access_token</span><span class="pl-kos">;</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">token</span><span class="pl-kos">)</span> <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">headers</span><span class="pl-kos">.</span><span class="pl-c1">Authorization</span> <span class="pl-c1">=</span> <span class="pl-s">`Bearer <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">token</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-s1">config</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">reject</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-s1">axios</span><span class="pl-kos">.</span><span class="pl-c1">interceptors</span><span class="pl-kos">.</span><span class="pl-c1">response</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span>
  <span class="pl-kos">(</span><span class="pl-s1">response</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">response</span><span class="pl-kos">,</span>
  <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-c">// reject promise if network error</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">error</span><span class="pl-kos">.</span><span class="pl-c1">response</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span>
        <span class="pl-c">//<span class="pl-k">@ts</span>-ignore</span>
        <span class="pl-en">setError</span><span class="pl-kos">(</span>
          <span class="pl-s">"Network connection error ! \n check your internet and try to reload"</span>
        <span class="pl-kos">)</span>
      <span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-k">return</span> <span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">reject</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
    <span class="pl-c">// Reject promise if usual error</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">.</span><span class="pl-c1">response</span><span class="pl-kos">.</span><span class="pl-c1">status</span> <span class="pl-c1">!==</span> <span class="pl-c1">401</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">reject</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-c">//Logout user if token refresh didn't work or user is disabled</span>
    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">.</span><span class="pl-c1">config</span><span class="pl-kos">.</span><span class="pl-c1">url</span> <span class="pl-c1">===</span> <span class="pl-s">"/auth/refresh/"</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"hello refresh failed"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span>
        <span class="pl-en">updateTokens</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
          <span class="pl-c1">access</span>: <span class="pl-s">""</span><span class="pl-kos">,</span>
          <span class="pl-c1">refresh</span>: <span class="pl-s">""</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
      <span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-en">isLogout</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

      <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-v">Promise</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">resolve</span><span class="pl-kos">,</span> <span class="pl-s1">reject</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-s1">reject</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">.</span><span class="pl-c1">response</span><span class="pl-kos">.</span><span class="pl-c1">status</span> <span class="pl-c1">===</span> <span class="pl-c1">401</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">return</span> <span class="pl-s1">client</span>
        <span class="pl-kos">.</span><span class="pl-en">post</span><span class="pl-kos">(</span><span class="pl-s">"/auth/refresh/"</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
          <span class="pl-c1">refresh</span>: <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">getState</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">User</span><span class="pl-kos">.</span><span class="pl-c1">refresh_token</span><span class="pl-kos">,</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
        <span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
          <span class="pl-k">const</span> <span class="pl-s1">newToken</span> <span class="pl-c1">=</span> <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">.</span><span class="pl-c1">access</span><span class="pl-kos">;</span>
          <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span>
            <span class="pl-en">updateTokens</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
              <span class="pl-c1">access</span>: <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">.</span><span class="pl-c1">access</span><span class="pl-kos">,</span>
              <span class="pl-c1">refresh</span>: <span class="pl-s1">res</span><span class="pl-kos">.</span><span class="pl-c1">data</span><span class="pl-kos">.</span><span class="pl-c1">refresh</span><span class="pl-kos">,</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>

          <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"error.config"</span><span class="pl-kos">,</span> <span class="pl-s1">error</span><span class="pl-kos">.</span><span class="pl-c1">config</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
          <span class="pl-c">// New request with new token</span>
          <span class="pl-k">const</span> <span class="pl-s1">config</span> <span class="pl-c1">=</span> <span class="pl-s1">error</span><span class="pl-kos">.</span><span class="pl-c1">config</span><span class="pl-kos">;</span>
          <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">headers</span><span class="pl-kos">[</span><span class="pl-s">"Authorization"</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-s">`Bearer <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">newToken</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>

          <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-v">Promise</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">resolve</span><span class="pl-kos">,</span> <span class="pl-s1">reject</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
            <span class="pl-s1">axios</span>
              <span class="pl-kos">.</span><span class="pl-en">request</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">)</span>
              <span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">response</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                <span class="pl-s1">resolve</span><span class="pl-kos">(</span><span class="pl-s1">response</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
              <span class="pl-kos">}</span><span class="pl-kos">)</span>
              <span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
                <span class="pl-s1">reject</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
              <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
        <span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
          <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span>
            <span class="pl-en">updateTokens</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
              <span class="pl-c1">access</span>: <span class="pl-s">""</span><span class="pl-kos">,</span>
              <span class="pl-c1">refresh</span>: <span class="pl-s">""</span><span class="pl-kos">,</span>
            <span class="pl-kos">}</span><span class="pl-kos">)</span>
          <span class="pl-kos">)</span><span class="pl-kos">;</span>
          <span class="pl-s1">store</span><span class="pl-kos">.</span><span class="pl-en">dispatch</span><span class="pl-kos">(</span><span class="pl-en">isLogout</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
          <span class="pl-v">Promise</span><span class="pl-kos">.</span><span class="pl-en">reject</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">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</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="store.dispatch(
            updateTokens({
              access: res.data.access,
              refresh: res.data.refresh,
            })
          );"><pre class="notranslate"><code class="notranslate">store.dispatch(
            updateTokens({
              access: res.data.access,
              refresh: res.data.refresh,
            })
          );
</code></pre></div>
<p dir="auto">it's updating the axios instance and recall second time but with the validate token.</p>
<p dir="auto">if I'm right I would like to know I could I fix that, thx everyone.</p>
<h4 dir="auto">Expected behavior, if applicable</h4>
<p dir="auto">I expected the same result but without the duplicate calls (like only one call of each)</p>
<h4 dir="auto">Environment</h4>
<ul dir="auto">
<li>axios :  ^0.21.0</li>
<li>react :  ^17.0.1</li>
</ul>