title: Cannot send form data with axios when using interceptors
body: <p>I'm using <strong>React</strong> and <strong>axios</strong> to fetch data from API. Everything is working fine until, for some reason, I need to intercept the response and in this case my form data are not sent anymore.</p>
  
  <p>For all classic cases, I'm doing something like this:</p>
  
  <pre><code>const formData = new FormData();
  formData.append('param1', 'value1');
  formData.append('param2', 'value2');
  formData.append('param3', 'value3');
  
  axios({
      //...
      data: formData
  })
  </code></pre>
  
  <p>So I can see in the request call:</p>
  
  <p><a href="https://i.stack.imgur.com/JJ0oc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JJ0oc.png" alt="enter image description here"></a></p>
  
  <p>To use interceptor, I tried without changing the config above like this:</p>
  
  <pre><code>const instance = axios.create({
      //...
      data: formData
  });
  instance.interceptors.response.use((response) =&gt; {
      //...
  }, (error) =&gt; {
      //...
  });
  instance.request();
  </code></pre>
  
  <p>but the form data is not sent in the request header:</p>
  
  <p><a href="https://i.stack.imgur.com/YXi8D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YXi8D.png" alt="enter image description here"></a></p>
  
  <p>My 2nd try was to use the <a href="https://www.npmjs.com/package/qs" rel="nofollow noreferrer">qs</a> parsing and stringifying library but I got the same result</p>
  
  <pre><code>const instance = axios.create({
      //...
      data: qs.stringify({
          param1: 'value1',
          param2: 'value2',
          param3: 'value3'
      })
  });
  instance.interceptors.response.use((response) =&gt; {
      //handle success
  }, (error) =&gt; {
      //handle error
  });
  instance.request();
  </code></pre>
  
  <p>My 3rd try was to add a request interceptor by modifying config (add <code>formData</code>) before request is sent but I never access the callback function (the <code>console.log()</code> line below) and so I got the same result:</p>
  
  <pre><code>axios.interceptors.request.use(function (config) {
      console.log(config);
      // Do something before request is sent
  }, function (error) {
      // Do something with request error
  });
  </code></pre>
  
  <p>I created <a href="https://codesandbox.io/s/cranky-allen-bnzw5" rel="nofollow noreferrer">this live running example</a> to simulate my 3 tries above.</p>
  
  <p>Any feedback about this issue or help?</p>