April 30, 2025

Axios set base URL in react

In this article we’ll learn how to set base URL using AXIOS for api to get data or perform any operation like CRUD operation. We will set a separate file for base when we need to change in future API location we can change easily from one place

First we need to install AXIOS using NPM

$ npm install axios

Now we’ll create a file httpCommon.js

import Axios from 'axios';

const axiosBaseURL = Axios.create({
    baseURL:'http://localhost:3000/'
});

export default axiosBaseURL

Now we’ll access in the component
App.js

import axiosBaseURL from './httpCommon';

getData() {
        axiosBaseURL.get('/restaurants') //change restaurants with your api name
            .then(res => { 
                console.log(res.data)
                })
            }).catch(err => {
                console.log(err)
            })
    }
  componentDidMount() {
        this.getData();
    }

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *