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';

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

Answer 2

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

Answer 3

我也遇到了同样的问题，解决方案是将它们放在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：

.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

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

3 个答案: