如何在每个http调用中为axios创建默认请求标头的配置？

Question

https://github.com/MrFiniOrg/AxiosQuestion

我想进行项目设置，以便不必在每个http调用中都指定相同的请求标头。

我已经在线搜索了此内容，但无法在我的项目中完成此操作。

有人可以协助我解决我遇到的这个问题。我是axios的新手，我不确定该如何配置。

我的项目似乎正在执行此操作，但是它发送了2次请求。一个带标题，另一个不带标题。

我的axios调用可以在app.js类组件中找到

Answer 1

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

全局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 '../../axios'; // 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文件中进行的配置[如果它们是相同的配置，即:)]

Answer 2

我也有同样的问题，解决方案是将它们定位在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

Answer 3

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