web-dev-qa-db-fra.com

Comment créer une configuration pour axios pour les en-têtes de demande par défaut dans chaque appel http?

https://github.com/MrFiniOrg/AxiosQuestion

Je voudrais avoir la configuration de mon projet pour ne pas avoir à spécifier le même en-tête de demande dans chaque appel http.

J'ai recherché ceci en ligne mais je n'ai pas pu accomplir ceci dans mon projet.

Quelqu'un pourrait-il m'aider à résoudre ce problème que je rencontre? Je suis nouveau pour réagir et axios et je ne sais pas comment le configurer.

Mon projet semble faire cela, mais il envoie la demande 2 fois. Un avec l'en-tête et un sans.

Mon appel axios se trouve dans le composant de classe app.js

reactjsaxios
5
UncleFifi

Vous pouvez spécifier les paramètres de configuration par défaut qui seront appliqués à chaque demande.

Valeurs par défaut axios globales 

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

Pour des informations plus spécifiques, veuillez visiter leur docs .

MISE À JOUR:

Vous pouvez le faire de deux manières:

1. Dans votre index.js fichier [c'est-à-dire le fichier racine "racine"), vous pouvez configurer votre request/ response méthodes. Quelque chose comme ça:

    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. Ou vous pouvez créer un nouveau fichier, une nouvelle instance de votre axios.js fichier pour être précis et importer les configurations séparément dans vos composants là où vous en avez besoin. Vous pouvez le nommer, par exemple axiosConfig.js et placez-y vos configurations spécifiques. Quelque chose comme ça:

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;

Après cela, vous importeriez ce fichier dans les composants qui en ont besoin et l'utiliser à la place de la précédente importation Axios [ node_modules], comme ceci:

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});
            });
    }

REMARQUE: Vous pouvez combiner ces deux méthodes selon vos besoins, mais n'oubliez pas que les configurations effectuées dans votre configAxios.js le fichier remplacera ceux créés dans votre index.js fichier [si ce sont les mêmes configurations, c'est :)]

17
Dzenis H.

À l'aide d'intercepteurs, il s'exécute sur chaque demande, donc si le jeton change (s'actualise), la demande suivante récupère le nouveau jeton. Vérifiez les valeurs existantes dans la demande pour permettre le remplacement de l'en-tête. Considérez que nous utilisons n'importe quel générateur de jetons et mettons à jour le jeton dans le stockage local. Ici, nous utilisons un objet d'horloge qui est stocké dans localStorage

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)
);
5
Mayur Nandane

J'ai également eu le même problème et la solution consistait à les localiser dans 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();

De plus, j'utilise .env fichiers pour conserver par exemple les URL de base:

. env.production 

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

. env.development 

REACT_APP_BE_URL=http://localhost:3000/

Et lorsque vous exécutez localement . Env.development sera utilisé, pour la construction de la production (npm run build) . env.production sera utilisé.

1
Kanan Rahimov