<p dir="auto">I have setup like:<br>
var api1= axios.create({<br>
baseURL: "www.myapi1.com"<br>
});<br>
api1.defaults.headers.post['Content-type'] = "application/x-www-form-urlencoded";</p>
<p dir="auto">when i try to override the default with-in post request as below, it still sends default headers.<br>
var config= {headers:{'Content-Type':'application/json'}};<br>
api1.post("my/uri",{'key':'value'}, config); //still sends Content-Type="application/x-www-form-urlencoded"</p>
<p dir="auto">Further, when i have multiple instances set up and one of them is having default header set, it is used by other instance as well. for example<br>
var api1= axios.create({<br>
baseURL: "www.myapi1.com"<br>
});<br>
api1. defaults.headers.post['Content-type'] = "application/x-www-form-urlencoded";</p>
<p dir="auto">var api2 = axios.create({<br>
baseURL: "www.myapi2.com"<br>
});</p>
<p dir="auto">var config= {headers:{'Content-Type':'application/json'}};<br>
api2.post("my/uri",{'key':'value'}, config); // this will also send Content-Type="application/x-www-form-urlencoded"</p>
<p dir="auto">If I have two instances of axios created with axios.create and I set a default header on one, it also changes it on all the other ones in existence.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="var instance1 = this.oauthService = axios.create({});
var instance2 = this.oauthService = axios.create({});

instance2.defaults.headers.common['Authorization'] = 'askdjfaksdjf';"><pre class="notranslate"><code class="notranslate">var instance1 = this.oauthService = axios.create({});
var instance2 = this.oauthService = axios.create({});

instance2.defaults.headers.common['Authorization'] = 'askdjfaksdjf';
</code></pre></div>
<p dir="auto">Both instance1 and 2 now have the Authorization header changed.  I believe the problem is that the util.merge operation doesn't do deep merging, though as you see below, only if the result[key] and val are both objects, does it do a recursive merge, otherwise it assigns the value by reference.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function merge(/\* obj1, obj2, obj3, ... */) {
  var result = {};
  function assignValue(val, key) {
    if (typeof result[key] === 'object' &amp;&amp; typeof val === 'object') {
      result[key] = merge(result[key], val);
    } else {
      result[key] = val;
    }
  }

  for (var i = 0, l = arguments.length; i &lt; l; i++) {
    forEach(arguments[i], assignValue);
  }
  return result;
}"><pre class="notranslate"><code class="notranslate">function merge(/\* obj1, obj2, obj3, ... */) {
  var result = {};
  function assignValue(val, key) {
    if (typeof result[key] === 'object' &amp;&amp; typeof val === 'object') {
      result[key] = merge(result[key], val);
    } else {
      result[key] = val;
    }
  }

  for (var i = 0, l = arguments.length; i &lt; l; i++) {
    forEach(arguments[i], assignValue);
  }
  return result;
}
</code></pre></div>