How to configure axios base URL?

Question

I am trying to configure my axios base URL. I found the code below from the following StackOverflow question:

How do I create configuration for axios for default request headers in every http call?

However, I am getting 'Unhandled Rejection (TypeError): Cannot read property 'data' of undefined (anonymous function)' error. This post is 2 years only and uses a class, but in my code, I am using a function.

The axios call works fine when I do it as normal (not change the base URL). But when I add the axiosConfig and change the base URL I get the error.

If anybody could shine some light on this problem I would be grateful.

axiosConfig.js

import axios from "axios";

const baseURL = process.env.REACT_APP_BASE_URL;

const instance = axios.create({
  // .. congigure axios baseURL
  baseURL: `${baseURL}`
});

export default instance;

The file where the axios call is made

import axiosConfig from "../axios/axiosConfig";

export const getPosts = () => {
  const posts= (dispatch) => {
    return axiosConfig
      .get('/posts')
      .then((response) => { 
        dispatch({
          type: GET_POSTS,
          payload: response.data,
        });
      })
      .catch((error) => {
        dispatch({
          type: POSTS_ERROR,
          payload: error.response.data.message,
        });
      });
  };
  return posts;
};

Can you post the entire code sample on codesandbox? It seems that the error is thrown at an undefined variable data in your app but I can't see a reference in the code sample you have provided — Siddhant Varma, Nov 12 '20 at 05:11
@SiddhantVarma I added it to the question. The axios call works fine when I just use axios.get({$baseURL}/post) — Clancinio, Nov 12 '20 at 05:18

Diego Castanho · Answer 1 · 2020-11-12T16:29:31.927

10

It works in the production and development for me.

import axios from "axios";

const api = axios.create({
 baseURL: process.env.REACT_APP_BASE_URL || "http://localhost:3030",
});

export default api;

to use I do something like

import api from "../services/api";
const response = await api.post("/sessions", { email, password });

edited Nov 12 '20 at 16:29

answered Nov 12 '20 at 05:41

Diego Castanho

161
6

Hey Diege. I am still getting the error. Can I see what you axios call looks like? – Clancinio Nov 12 '20 at 16:09
I edited it, check if it was what I needed, I hope I helped – Diego Castanho Nov 12 '20 at 16:30
Something like that. Look at my code. I am doing a get request. When I do a regular axios call it works fine. But when I edit the base URL I get the error – Clancinio Nov 12 '20 at 16:38
Initially I would check the call to REACT_APP_BASE_URL configured in the .env file, this may be the problem – Diego Castanho Nov 12 '20 at 16:48

score 3 · Answer 2 · answered Nov 12 '20 at 05:27

3

in App.js define

import Axios from "axios";

Axios.defaults.baseURL = "http://127.0.0.1:8000/api/";

in any other components use

insted of http://127.0.0.1:8000/api/user use only user

axios.get('user')
.then((res)=> {
console.log(res)
})

answered Nov 12 '20 at 05:27

Manjunath V M

31
7

score 0 · Answer 3 · answered Nov 12 '20 at 05:22

Your axiosConfig.js file it's ok.

You are accessing to 'data' property of an object with value = undefined. I'm assuming it's response.data

So check https://github.com/axios/axios/issues/883, here you can find more information about why your getting this response

My advise is

Debugg and check the value of response
add .catch(error => {...) at the end of .then(...)

How to configure axios base URL?

3 Answers3

Linked