instance.defaults changes global object

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.

var instance1 = this.oauthService = axios.create({});
var instance2 = this.oauthService = axios.create({});

instance2.defaults.headers.common['Authorization'] = 'askdjfaksdjf';

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.

function merge(/\* obj1, obj2, obj3, ... */) {
  var result = {};
  function assignValue(val, key) {
    if (typeof result[key] === 'object' && typeof val === 'object') {
      result[key] = merge(result[key], val);
    } else {
      result[key] = val;
    }
  }

  for (var i = 0, l = arguments.length; i < l; i++) {
    forEach(arguments[i], assignValue);
  }
  return result;
}

[marbemac]

Using Axios in a server side rendering situation (next.js, meteor, any SSR focused library) leads to a huge security issue when using defaults.headers to set the currently logged in user token… this should be an urgent and critical bug IMHO. We only just discovered this, crazy its been open for over a year 😕.

[jonjaques]

I was able to work around this by adding a request interceptor. I have a custom class wrapping axios, so something like this:

    this.client.interceptors.request.use(request => {
      request.headers['Authorization'] = `Bearer ${this.token}`
      return request
    })