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

Posted 2023-02-22

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

【英文标题】：How do I create configuration for axios for default request headers in every http call?

【发布时间】：2019-01-18 13:03:48

【问题描述】：

https://github.com/MrFiniOrg/AxiosQuestion

我想设置我的项目，这样我就不必在每个 http 调用中指定相同的请求标头。

我在网上搜索过这个，但我无法在我的项目中完成这个。

有人可以帮助我解决我遇到的这个问题吗？ 我是 react 和 axios 的新手，我不知道如何配置它。

我的项目似乎正在这样做，但它发送了 2 次请求。 一个有标题，一个没有。

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

【问题讨论】：

请在您的问题中加入minimal reproducible example。

有用的链接：- dev.to/napoleon039/…

【参考方案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';

如需更多具体信息，请访问他们的docs。

更新：

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

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 文件中所做的配置[如果它们是相同的配置，那就是:)]

【讨论】：

在哪里，在index.js?

@Pavindu 是的，你可以把它放在index.js。示例：axios.defaults.baseURL = process.env.REACT_APP_BE_URL;

@mleister 您正在做的是覆盖 axios 包的默认值以满足您对每个请求的需求。因此，无论您需要那些特殊的 axios 配置，您都可以导入您新创建和修改的文件并使用它，否则，您将导入 axios npm 模块并使用它。

能否请您展示如何在功能组件中执行第二种方式？我已经尝试过这种方式，但我得到“未处理的拒绝（TypeError）：无法读取未定义的属性“数据”（匿名）函数

您的意思是：import axios from '../../axiosConfig';？

【参考方案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.production

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

【参考方案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)
);

【讨论】：

可以在index.js 文件中定义这个吗？我不知道我应该在哪里定义这个。

通常我们为 axiox 设置和 API 调用创建 service.js

可以在这个文件中引用StateContext吗？