您可以指定将应用于每个请求的配置默认值。

全局 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

有关更多具体信息，请访问他们的文档。

更新：

你可以通过两种方式做到这一点：

1.在您的index.js文件中[意思是顶级又名“根”文件]，您可以配置您的request/ response方法。像这样的东西：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'AUTH TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/json';

axios.interceptors.request.use(request => {
    console.log(request);
    // Edit request config
    return request;
}, error => {
    console.log(error);
    return Promise.reject(error);
});

axios.interceptors.response.use(response => {
    console.log(response);
    // Edit response config
    return response;
}, error => {
    console.log(error);
    return Promise.reject(error);
});

ReactDOM.render( <App />, document.getElementById( 'root' ) );
registerServiceWorker();

2.或者您可以创建一个新文件，axios.js准确地说是文件的新实例，然后在您可能需要它们的组件中单独导入配置。您可以命名它，例如axiosConfig.js，并将您的特定配置放入其中。像这样的东西：

axiosConfig.js

// First we need to import axios.js
import axios from 'axios';
// Next we make an 'instance' of it
const instance = axios.create({
// .. where we make our configurations
    baseURL: 'https://api.example.com'
});

// Where you would set stuff like your 'Authorization' header, etc ...
instance.defaults.headers.common['Authorization'] = 'AUTH TOKEN FROM INSTANCE';

// Also add/ configure interceptors && all the other cool stuff

instance.interceptors.request...

export default instance;

之后，您可以将此文件导入到需要它的组件中，并使用它代替之前的 Axios [ node_modules ] 导入，如下所示：

Example.js

import React, { Component } from 'react';
// import axios from 'axios'; We don't need this anymore
import axiosConfig from '../../axiosConfig'; // But instead our new configured version :)

class Example extends Component {
    state = {
        data: [],
        error: false
    }

    componentDidMount () {
        // We could name (import) it as axios instead, but this makes more sense here ... 
        axiosConfig.get('/posts' )
            .then(response => {
                   this.setState({data: response});
                });
            })
            .catch(error => {
                this.setState({error: true});
            });
    }

注意：您可以根据需要组合这两种方法，但请记住，在您的configAxios.js文件中进行的配置将覆盖在您的index.js文件中进行的配置[如果它们是相同的配置，那就是:)]

使用拦截器，它在每个请求上运行，因此如果令牌更改（刷新），则下一个请求将获取新令牌。检查请求中的现有值以允许覆盖标头。考虑我们正在使用任何令牌生成器并更新本地存储中的令牌。这里我们使用存储在 localStorage 中的 keyclock 对象

import * as axios from "axios";
axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;

axios.interceptors.request.use(
  config => {
    if (!config.headers.Authorization) {
      const token = JSON.parse(localStorage.getItem("keyCloak")).token;

      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
    }

    return config;
  },
  error => Promise.reject(error)
);

我也有同样的问题，解决方案是将它们定位在index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import axios from 'axios';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import App from './components/app/App';
import * as serviceWorker from './serviceWorker';

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

serviceWorker.unregister();

另外，我使用.env文件来保留例如基本网址：

.env.生产

REACT_APP_BE_URL=http://production-url-to-backend/

.env.development

REACT_APP_BE_URL=http://localhost:3000/

当您在本地运行时，将使用.env.development，对于生产构建 ( npm run build)将使用.env.production。

• 有关 axios 全局配置的更多信息：https : //github.com/axios/axios#global-axios-defaults
• 更多关于.env：https : //facebook.github.io/create-react-app/docs/adding-custom-environment-variables