Аксиозы при смене заголовков экземпляров тоже изменяются и другие экземпляры

Question

Есть такие экземпляры axios, как этот

// @flow
import axios, { type Axios } from 'axios';
import { HOST } from 'constants/host';

// Set config defaults when creating the instance
export const AppApi = axios.create({
  baseURL: `${HOST.APP_API.URL}${HOST.APP_API.API_PREFIX}`,
});

export const MenuApi = axios.create({
  baseURL: `${HOST.MENU_API.URL}${HOST.MENU_API.API_PREFIX}`,
});

export const setAuthToken = (authToken: string, api: Axios) => {
  api.defaults.headers.common['Authorization'] = authToken;
};

И вы можете заметить удобную функцию setAuthToken.

Она используется после того, как я получаю токен аутентификации и устанавливаю его в экземпляр.

Но всякий раз, когда я изменяю какие-либо заголовки экземпляров, все остальные экземпляры тоже меняются.

Даже объект axios по умолчанию.Если я сделаю

axios.defaults.headers.common['Authorization'] = 'afds';

Все экземпляры изменятся.

Это какая-то ошибка, или я что-то здесь упускаю?

Вот как это делается в документации.

https://github.com/axios/axios

см. «Пользовательские настройки по умолчанию»

Answer 1

Вам просто нужно изменить значения по умолчанию для этого экземпляра, а не axios.

export const MenuApi = axios.create({
  baseURL: `${HOST.MENU_API.URL}${HOST.MENU_API.API_PREFIX}`,
});

Например, вы можете установить токен как

MenuApi.defaults.headers.common['Authorization'] = 'afds';

, а не

axios.defaults.headers.common['Authorization'] = 'afds';

В противном случае он изменился бы во всех случаях.

Answer 2

Это известная ошибка с axios.

Обходной путь - добавить пустую иерархию объектов следующим образом.

export const AppApi = axios.create({
  baseURL: `${HOST.APP_API.URL}${HOST.APP_API.API_PREFIX}`,
  headers: { common: {} },
});

export const MenuApi = axios.create({
  baseURL: `${HOST.MENU_API.URL}${HOST.MENU_API.API_PREFIX}`,
  headers: { common: {} },
});

Более подробная информация здесь

https://github.com/axios/axios/issues/1664