如何在 React JS 中设置默认全局配置 axios

Question

i want to set default config for my axios url. i already searching and now i have 3 page. app.js, index.js and config.env. can anyone help me to correct my code so i can make global config in my JS.

here's my code

index.js

        import React from "react";
        import ReactDOM from "react-dom";
        import { createBrowserHistory } from "history";
        import { Router, Route, Switch, Redirect } from "react-router-dom";
        import axios from 'axios';
        // core components
        import Admin from "layouts/Admin.js";
        import Dashboard from "layouts/Dashboard.js";
        require('dotenv').config()

        axios.defaults.baseURL = process.env.REACT_APP_BE_URL;
        //......

config.env

        REACT_APP_BE_URL = 'http://localhost/url/api'

App.js

   import React from "react";
   import axios from 'axios';
   require('dotenv').config()

   get = () => {
    const option = {
    url: REACT_APP_BE_URL + '/listpeople',

    method: 'POST',
    data: {
      "data": {
        "data": "...."
      },
    }

  };


  axios(option)
    .then(response => {
      this.setState({
        data: response.data.data,
        isLoading: false,
      });
      console.log(response.data);
    })

but with this code i cant get the REACT_APP_BE_URL in my App.js. help me to correct my code.

Answer 1

if you want to access global configuration then please follow this steps:

1. Create.env file in your project root, not under src but.env and src folder will be siblings.
2. Then use process.env['REACT_APP_API_URL'] or process.env.REACT_APP_API_URL

if it does not work then please try to create fresh react app and follow these steps.