CODEWITHSUNDEEP
reactjsreact-reduxaxiosreact-hooks
SDK
SDK

Reputation: 1518

How to use multiple baseURL axios in ReactJS?

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

Upvotes: 1

Views: 6069

Answers (2)

bjupreti
bjupreti

Reputation: 353

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 };

Upvotes: 0

Fraction
Fraction

Reputation: 12974

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,
    });

  }
};

Upvotes: 5

Related Questions