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

• • 全局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文件中[也就是顶层的'root'文件]你可以配置你的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**，然后把你的特定配置放在里面。类似于这样：
• • 一米四分一秒**

// 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 *]导入，如下所示：

• • 一个月五个月一个月**

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文件来保存例如基本URL：

.环境生产

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

.环境发展

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

您可以将其放入一个文件中（如here所述），然后将其导入顶层

import { CssBaseline } from "@mui/material";
import "./App.css";
import ProfilePage from "./view/Profile/ProfilePage";
import "./service/axios-config"; //<---import it here

function App() {
  return (
    <div className="App">
      <CssBaseline />
      <ProfilePage />
    </div>
  );
}

export default App;

而不是在顶层添加以下代码：

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

我有一个简单的方法来为请求头设置axios配置，它可以处理全局错误。

import axios, { AxiosError, AxiosHeaders } from "axios";
import useAuthStore from "../hooks/useAuthStore";
import { BASE_URL } from "./config";
import { getItem } from "./storage";

   const axiosInstance = axios.create({
   baseURL: `${BASE_URL}`,
   headers: {
   "Access-Control-Allow-Origin": "*",
  },

}）;

axiosInstance.interceptors.request.use(
  async (config) => {
    const token = await getItem("jwtToken");
    if (config.headers)
        (config.headers as AxiosHeaders).set("Authorization", `Bearer 
     ${token}`);
      return config;
   },
   (error) => Promise.reject(error),
 );

 axiosInstance.interceptors.response.use(
   (response) => response,
    (error) => {
        if (error instanceof AxiosError && error.response?.status === 401) 
      {
        useAuthStore.setState({ signedInAs: undefined });
      }
      return Promise.reject(error);
     },
    );

   export default axiosInstance;

注意：基本URL是从另一个文件导入的，而useAuthStore是来自zustand的自定义钩子，用于存储用户状态以进行授权。