How to use multiple baseURL axios in ReactJS?

Question

I am having a config file . where i am setting the baseURL for the entire app and also saving the bearer token for the entire API requests. Here i am in situation to add another api . I dont know how to add another baseURL & use this on my API requests.Here i am sharing the code of what i have done.

BASE URL FILE:

import axios from 'axios';
axios.defaults.baseURL = http://localhost:3000/summary;

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common.Authorization = `Bearer ${token}`;
  } else {
    delete axios.defaults.headers.common.Authorization;
  }
};

export default setAuthToken;

API ACTION FILE:

export const login = ({ email, password }) => async (dispatch) => {

  const userData = {
    username: email,
    password,
  };

  try {
    const res = await axios.post('/license-api/auth/login', userData, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data.token,
    });
  } catch (error) {
    dispatch({
      type: LOGIN_FAIL,
    });

  }
};

i need to add another url like this in BASE URL FILE

axios.defaults.baseURL = http://localhost:6000/profile

how to add this one and use this in API action file.

Please help me with this.

Thanks in advance

Create two different client instances with different values? npmjs.com/package/axios#creating-an-instance — jonrsharpe
– jonrsharpe, Commented Mar 26, 2020 at 8:13

Fraction · Accepted Answer · 2020-03-26 08:38:39Z

As said you could create two instances of axios and use them as needed:

In you BASE URL file:

import axios from 'axios';

const setAuthToken = (token) => {
  if (token) {
    axios.defaults.headers.common.Authorization = `Bearer ${token}`;
  } else {
    delete axios.defaults.headers.common.Authorization;
  }
};

const mainAxios = axios.create({
  baseURL: 'http://localhost:3000/summary'
});

const profileAxios = axios.create({
  baseURL: 'http://localhost:6000/profile'
});

export default setAuthToken;
export { mainAxios, profileAxios };

Then in your API ACTION file:

import { profileAxios } from 'path/to/baseurl';

export const login = ({ email, password }) => async (dispatch) => {

  const userData = {
    username: email,
    password,
  };

  try {
    const res = await profileAxios.post('/license-api/auth/login', userData, config);
    dispatch({
      type: LOGIN_SUCCESS,
      payload: res.data.token,
    });
  } catch (error) {
    dispatch({
      type: LOGIN_FAIL,
    });

  }
};

bjupreti · Accepted Answer · 2021-08-03 21:09:22Z

The above code works well. I don't see where setAuthToken is called so if you don't want to call setAuthToken manually then you might want to do this.

import axios from "axios";
import { config } from "./config";

const pythonAPI = axios.create({
  baseURL: config.pythonServerUrl,
});

const nodeApi = axios.create({
  baseURL: config.nodeServerUrl,
});

const setToken = () => {
  const token = localStorage.getItem("auth_token");
  if (token) {
    pythonAPI.defaults.headers.common.Authorization = `Basic ${token}`;
  } else {
    delete pythonAPI.defaults.headers.common.Authorization;
  }
};

const pythonApi = {};

pythonApi.get = async (url) => {
  setToken();
  return pythonAPI.get(url).catch((e) => e.response);
};

pythonApi.post = async (url, data) => {
  setToken();
  return pythonAPI.post(url, data).catch((e) => e.response);
};

export { pythonApi, nodeApi };

Collectives™ on Stack Overflow

How to use multiple baseURL axios in ReactJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related