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

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

• javascript
• reactjs
• axios

• 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 Commented Nov 12, 2020 at 5:11
• @SiddhantVarma I added it to the question. The axios call works fine when I just use axios.get({$baseURL}/post) – Clancinio Commented Nov 12, 2020 at 5:18

3 Answers 3

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

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

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

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