Axios: Impossible de publier les données dans axios

Créé le 21 nov. 2017  ·  62Commentaires  ·  Source: axios/axios

J'utilise ce code pour POSTER les données sur l'API Web
var paramètre = {
arguments : {
myStringVal : '979251e4-6c9f-460d-ba32-1b6fe58ce8a3'
}
} ;

axios({
méthode : 'post',
url : 'api/Application/Action/MyWebAPIMethod',
données : JSON.stringify(param),
});

et mon code API Web est comme ceci:
classe publique MyClassVM
{
chaîne publique myStringVal { obtenir ; ensemble; }
}
MessageVM publicMyWebAPIMethod (arguments MyClassVM){
// mon code va ici
}

Le problème est le suivant : lorsque je transmets myStringVal : '979251e4-6c9f-460d-ba32-1b6fe58ce8a3', cela me donne null dans l'API Web [args.myStringVal = null ].

Comment puis-je transmettre les valeurs dans axios POST.

Merci d'avance

Commentaire le plus utile

J'ai récemment commencé à passer de l'utilisation de jQuery pour le travail AJAX à Axios, simplement parce que cela semble être à la mode. Mais j'ai été choqué d'apprendre que je ne peux pas faire un simple POST.

Alors, voici ce que j'ai d'abord essayé:

axios.post('/api/event/item', {
    event_id: eventId,
    item_id: itemId,
    description: description
  })
  .catch(function (error) {
    console.log(error);
  });

Sur le backend (en utilisant PHP) $_POST était complètement vide. J'ai donc fait quelques recherches sur Google, et cela fonctionne (avec l'utilisation d'un polyfill, soupir):

const params = new URLSearchParams();
params.append('event_id', eventId);
params.append('item_id', itemId);
params.append('description', description);
axios({
  method: 'post',
  url: '/api/event/item',
  data: params
});

Cela marche. J'ai donc besoin d'utiliser URLSearchParams ? Eh bien, c'était frustrant car les documents montrent que la première méthode devrait fonctionner.

Quelqu'un d'autre a ce problème ?

Tous les 62 commentaires

@awais-ilyas , je ne pense pas que vous devriez normalement chaîner la charge utile POST. Essaye ça:

...
axios({
method: 'post',
url: 'api/Application/Action/MyWebAPIMethod',
data: args,
});
...

Ce qui devrait définir le data dans le corps POST.

J'ai récemment commencé à passer de l'utilisation de jQuery pour le travail AJAX à Axios, simplement parce que cela semble être à la mode. Mais j'ai été choqué d'apprendre que je ne peux pas faire un simple POST.

Alors, voici ce que j'ai d'abord essayé:

axios.post('/api/event/item', {
    event_id: eventId,
    item_id: itemId,
    description: description
  })
  .catch(function (error) {
    console.log(error);
  });

Sur le backend (en utilisant PHP) $_POST était complètement vide. J'ai donc fait quelques recherches sur Google, et cela fonctionne (avec l'utilisation d'un polyfill, soupir):

const params = new URLSearchParams();
params.append('event_id', eventId);
params.append('item_id', itemId);
params.append('description', description);
axios({
  method: 'post',
  url: '/api/event/item',
  data: params
});

Cela marche. J'ai donc besoin d'utiliser URLSearchParams ? Eh bien, c'était frustrant car les documents montrent que la première méthode devrait fonctionner.

Quelqu'un d'autre a ce problème ?

@dlgoodchild Essayez-vous de l'envoyer en tant que données de formulaire ? J'ai trouvé que mon corps POST était également vide, mais j'ai dû l'utiliser pour le transformer en quelque chose de semblable à Form:

   ...
      data: params,
      transformRequest: [
        function(data, headers) {
          const serializedData = []

          for (const k in data) {
            if (data[k]) {
              serializedData.push(`${k}=${encodeURIComponent(data[k])}`)
            }
          }

          return serializedData.join('&')
        }
      ],
   ...

D'accord, la fonctionnalité POST a besoin de travail.

Ahh bonne approche ! Pour le bénéfice de tous ceux qui atterrissent ici, à la fin, je l'ai fait fonctionner en utilisant 3 variantes :

  1. Données de formulaire
  2. URLSearchParams
  3. querystring.stringify (partie de Node)

Le problème avec les 2 premières options est la compatibilité du navigateur (vérifier avec caniuse.com). Le dernier est une autre dépendance.

Je n'étais pas au courant de l'option transformRequest , cela a l'air bien et c'est une excellente option si vous voulez minimiser les dépendances et travailler sur plusieurs navigateurs, en particulier pour les anciennes versions.

Je pense que la documentation est ce qui rend Axios frustrant pour beaucoup de gens. Le nombre de questions StackOverflow relatives au POST utilisant Axios est une bonne indication qu'il y a un problème quelque part et un malentendu général.

J'ai le même problème - j'ai passé quelques heures à faire des recherches, j'ai finalement trouvé ce problème. Réflexions : POST ne devrait pas être compliqué et ne devrait pas nécessiter de dépendances ou de configuration supplémentaire. Cela ressemble à nouveau à AngularJS 1. Je vais passer sur l'utilisation de cette bibliothèque pour l'instant.

@yuri-wisestamp est tout à fait d'accord, c'est un choix de design très étrange/inhabituel. J'ai surtout cessé de l'utiliser maintenant car je me sentais rejeté par les heures que j'ai perdues à le déboguer en raison du manque de bonne documentation pour l'exposer dès le départ.

Publier avec Axios et PHP est un vrai cauchemar !

J'ai passé deux heures, sans obtenir aucun résultat...

Les publications non encodées sous forme de formulaire ne remplissent pas $_POST en PHP. Vous devez lire le corps du message :

$body = file_get_contents('php://input');

si vous attendez json:

$json=json_decode($body);

Ce code :

axios = require('axios');

var param = {
   args: {
      myStringVal: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3'
   }
};

axios({
   method: 'post',
   url: 'http://home.test/post.php',
   data: param,
});

Contre ceci dans le serveur:

<?php

$entityBody = file_get_contents('php://input');

file_put_contents(__DIR__ . '/output.txt', print_r(json_decode($entityBody), true));

Produit cette sortie :

stdClass Object
(
    [args] => stdClass Object
        (
            [myStringVal] => 979251e4-6c9f-460d-ba32-1b6fe58ce8a3
        )

)

J'ai réglé mon problème comme ça :

De face

✋userSearchParams() ne fonctionne pas partout ( https://caniuse.com/#search =URLSearchParams() )

        let params = new URLSearchParams();
        params.append('email', this.email );
        params.append('url', userInfo.url );
        this.$http.post(
          'http://localhost:9999/api/record.php', params
          )
        .then((response) => {
          if (response.data.message === "success" )  this.$router.push( 'thankyou' );
        })
        .catch( (error) =>   console.log(error) ) ;

Retour

print_r( $_POST ); 

// $_POST['email'] = '[email protected]'
// $_POST['url'] = 'http://google.fr'

J'ai fait fonctionner le mien en installant qs.

          import qs from "qs";


        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

        axios.post("DOMAIN/event/new", qs.stringify(params))
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });

@Legym Merci ! J'ai aussi le mien avec qs.stringify! Merde, j'étais sur le point d'arrêter d'utiliser axios car je ne pouvais pas faire fonctionner correctement mes requêtes POST!

Merci beaucoup!

J'ai en fait trouvé une meilleure solution sans avoir besoin d'une bibliothèque externe. L'en-tête de la demande de publication est défini sur form. Vous devrez modifier l'en-tête si vous envoyez un objet JSON

        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

axios.post('DOMAIN/event/new', params, {
     headers: {
          'content-type': 'application/json',
     },
})

@Legym Merci beaucoup !

Je ne comprends vraiment pas pourquoi POST ne fonctionne pas. Les en-têtes de Legym ne résolvent pas le problème pour moi.
jquery a fonctionné du premier coup donc je ne sais pas ce qui se passe.

L'approche URLSearchParams ne fonctionne pas pour Safari sous macOS.

Quelqu'un a-t-il pu POSTER un fichier et des données via axios ?
J'utilise le framework PHP Laravel.

@latanoil honnêtement, il y a peu ou pas d'avantages à utiliser axios. Il est préférable de s'en tenir à une bibliothèque Ajax plus simple, mieux prise en charge et mieux documentée. Jquery a fait ses preuves et fonctionne parfaitement bien et vous n'aurez aucun des problèmes rencontrés ici.

Merci @dlgoodchild pour les conseils. J'ai lutté avec cela pendant quelques jours maintenant. Je vais m'en tenir à jQuery.

axios({
  method: 'post',
  url: 'http://blahblahblah',
  params: {
    key1: value1,
    key2: value2
  }
})

travaillez de cette façon, utilisez _params_, pas _data_

LOL Je ne peux pas croire que c'était si difficile à faire fonctionner.

Quelque chose de _this_ basic, _this_ ... _common_, ne devrait PAS être difficile.

@HellsingMatt non n'a pas fonctionné pour moi. Il est possible que vous confondiez cela avec $_GET. Parce que 'params' est ce que j'ai utilisé pour le faire fonctionner pour GET. Mais cela n'a pas fonctionné pour moi avec POST.

@mallochine intéressant, j'utilise _params_ avec POST dans node.js

@HellsingMatt d' accord. J'utilise PHP. On dirait qu'axios chie complètement avec PHP. Utilisez-vous le back-end PHP ?

@mallochine n'a jamais encore appris PHP, tout mon backend utilise node.js

J'utilise PHP. Pas d'issues.
Dans certains cas, je veux json (généralement), donc je définis l'en-tête en conséquence. Dans les cas où je veux que $_POST soit rempli, j'utilise une bibliothèque comme qs ou ma propre implémentation plus petite et plus simple (qui ne gérerait pas tous les cas mais me convient) pour convertir en une chaîne de requête.

Voir cet article SO pour un exemple sur une telle fonction : https://stackoverflow.com/a/1714899/6728516

Cette bizarrerie d'Axios a été abordée dans la documentation principale pendant longtemps, bien qu'elle puisse être un peu plus descriptive.

Je trouve généralement l'utilisation de JSON tellement plus polyvalente que je le fais rarement plus longtemps. Voir mon commentaire ci-dessus pour une méthode de récupération du JSON posté en PHP.

Putain d'enfer.

Je ne voulais pas casser la fonctionnalité API standard pour les formulaires, j'ai donc dû ajouter fallback .

if(empty($_POST['dep_date'])) {
    $body = file_get_contents('php://input');
    $json = json_decode($body, true);
    $_POST['dep_date'] = $json['dep_date'];
    .....

Heureusement, j'avais accès au côté php, s'il s'agissait d'une API externe, je serais §§§ . Il devrait y avoir un avertissement à ce sujet lors de la liste de tous les clients ajax pour vue :)

Cela fonctionne avec moi en utilisant "params", et j'utilise PHP avec cela.
Notez qu'il s'agit d'axios dans nativescript-vue 2.0.0.

@HellsingMatt Merci !

J'ai fait fonctionner le mien en installant qs.

          import qs from "qs";


        const params = {
            name: "User",
            startTime: "2:00PM",
            endTime: "3:00PM",
            status: "pending",
            invitation: "test",
        };

        axios.post("DOMAIN/event/new", qs.stringify(params))
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });

P

S'il vous plaît, pouvez-vous publier le code backend php avec tous les en-têtes cors et le type de contenu. J'ai essayé les deux axios et récupérer les deux ne fonctionnent pas.

Cela ressemble à une erreur dans la documentation, mais devrait utiliser l'objet params, pas de données et cela fonctionne. J'ai passé 2h à le comprendre((

 axios({
 méthode : 'post',
 URL : 'url',
 paramètres : {
 valeur clé
 }
 })

Merci beaucoup Daniil. J'apprécie ton aide. Merci de m'avoir fait connaître
Erreur.

Le samedi 10 novembre 2018 à 11h18, Daniil [email protected] a écrit :

Cela ressemble à une erreur dans la documentation, mais devrait utiliser l'objet params, non
données et ça marche. J'ai passé 2h à le comprendre((

axios({
méthode : 'post',
URL : '/wp-admin/admin-ajax.php?action=data_fetch',
paramètres : {
valeur clé
}
})


Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/axios/axios/issues/1195#issuecomment-437612819 , ou muet
le fil
https://github.com/notifications/unsubscribe-auth/ApIWeUP45k17b70vsaT80KR1g_cxXcMvks5utyZzgaJpZM4Ql8j5
.

J'ai réglé mon problème comme ça :

De face

✋userSearchParams() ne fonctionne pas partout ( https://caniuse.com/#search =URLSearchParams() )

        let params = new URLSearchParams();
        params.append('email', this.email );
        params.append('url', userInfo.url );
        this.$http.post(
          'http://localhost:9999/api/record.php', params
          )
        .then((response) => {
          if (response.data.message === "success" )  this.$router.push( 'thankyou' );
        })
        .catch( (error) =>   console.log(error) ) ;

Retour

print_r( $_POST ); 

// $_POST['email'] = '[email protected]'
// $_POST['url'] = 'http://google.fr'

Cela m'aide beaucoup, merci !

axios({
  method: 'post',
  url: 'http://blahblahblah',
  params: {
    key1: value1,
    key2: value2
  }
})

travaillez de cette façon, utilisez _params_, pas _data_

fonctionne pour moi aussi merci, approche beaucoup plus propre.

J'ai une instance Axios déjà créée avec l'URL de base.

Je veux faire un post en utilisant cette instance. Quelle est la bonne configuration ?

Cela marche:

    axios({
        method: "post",
        url: "https://slack.com/api/chat.postMessage",
        params: {
            token: this.token,
            channel: this.channel,
            text: "Testing API"
        },
        transformRequest: [
            (data, headers) => {
                console.log("data-in-transform", data);
                delete headers.post["Content-Type"];
                return data;
            }
        ]
    });

Cela ne fonctionne pas:

    ax = axios.create({
        baseURL: `https://slack.com/api/`,
        params: {
            token: this.token,
            channel: this.channel
        },
        withCredentials: false,
        transformRequest: [
            (data, headers) => {
                delete headers.post["Content-Type"];
                return data;
            }
        ]
    });
        this.ax.post("chat.postMessage", {
            withCredentials: false,
            params: {
                text: "Testing API"
            },
            transformRequest: [
                (data, headers) => {
                    console.log("data-in-transform", data);
                    delete headers.post["Content-Type"];
                    return data;
                }
            ]
        });

J'ai passé 15 jours pour résoudre ce problème :( Voici le Code

 Axios({

        method: apiMethod,
        url: root_url, // Api URL
        data: (apiMethod === 'POST')? Qs.stringify(apiParams) : undefined, // API post parameters,
        params:(apiMethod === 'get')? apiParams : undefined, //API get params
        headers:{
          'Accept': 'application/json',
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        },

    }).then(function (response) { // On Success
        console.log('Response', response.data );

        successCallback(response.status, response.data);
    })
    .catch(function (error) { // On Failure
        console.log('error', error);

        errorCallback(error.status, error.data);
    })
    .then(function () { // Always
        alwaysCallback(false);
    });

C'est tout simplement horrible. Une si longue discussion pour simplement envoyer une requête POST et à la fin nous n'avons pas encore de solution concrète.

Je suis confronté au même problème et j'ai déjà passé 3 jours. J'ai essayé toutes les combinaisons et options possibles et je me retrouve toujours dans la même situation. Par conséquent, mon backend est également écrit en PHP, j'ai moi aussi l'impression que axios a des problèmes majeurs avec la combinaison POST et PHP, ce qui n'est tout simplement pas accepté !!

jQuery gère ces choses exceptionnellement bien et je vais y revenir à nouveau. Je ne veux pas installer de dépendances supplémentaires juste pour envoyer une requête POST !

De plus, le fil est fermé sans solution appropriée !!

Il a été fermé par @awais-ilyas, il devrait idéalement le rouvrir, si c'est possible.

Ouais! Mais le fil ne me mène nulle part. L'envoi d'une requête POST à ​​PHP à l'aide d'un objet JSON est toujours pénible ! @dlgoodchild existe-t-il encore une solution de contournement puisque je suis un retardataire sur ce fil?

ouais @emfluenceindia il y a beaucoup de solutions de contournement mentionnées dans ce fil qui ne nécessitent pas l'utilisation de JSON.

Je les ai vu. Cela signifie-t-il qu'il n'est toujours pas possible de POSTER en tant que JSON ?

Ce fil ne concerne pas vraiment la publication de JSON. La publication de JSON en tant que corps de publication n'est pas un problème, ce fil de discussion concerne l'utilisation de l'attribut data: , comme avec jQuery et qui remplit en quelque sorte $_POST en PHP.

J'ai récemment commencé à passer de l'utilisation de jQuery pour le travail AJAX à Axios, simplement parce que cela semble être à la mode. Mais j'ai été choqué d'apprendre que je ne peux pas faire un simple POST.

Alors, voici ce que j'ai d'abord essayé:

axios.post('/api/event/item', {
    event_id: eventId,
    item_id: itemId,
    description: description
  })
  .catch(function (error) {
    console.log(error);
  });

Sur le backend (en utilisant PHP) $_POST était complètement vide. J'ai donc fait quelques recherches sur Google, et cela fonctionne (avec l'utilisation d'un polyfill, soupir):

const params = new URLSearchParams();
params.append('event_id', eventId);
params.append('item_id', itemId);
params.append('description', description);
axios({
  method: 'post',
  url: '/api/event/item',
  data: params
});

Cela marche. J'ai donc besoin d'utiliser URLSearchParams ? Eh bien, c'était frustrant car les documents montrent que la première méthode devrait fonctionner.

Quelqu'un d'autre a ce problème ?

J'ai rencontré ce problème aujourd'hui et j'ai passé presque une journée entière dessus. ça s weird because the document of axios told me to use first method which didn ne marche pas. merci mon frère

avez-vous mis
app.use(express.json())
à l'app.js ?

Cela devrait suffire :

const formData = new FormData();
formData.append('action', 'some-action');
formData.append('page', 1);

axios
  .post('/async/index.php', formData, {
    retry: 3,
    retryDelay: 100,
  })
  .then(res => {
    console.log('get', res.data);
  })
  .catch(console.log);

PHP

print_r($_POST);

La réponse est d'ajouter ce qui suit. Axios utilise url-form-encoding par défaut.

headers: {
  "Content-Type": "text/plain"
}

Aucune de ces solutions n'a fonctionné pour moi, et je pense que c'est parce que pour les utilisateurs de node.js, le README est trompeur car vous _devez avoir un objet de données_ pour les demandes de publication car l'objet de configuration est le _3ème argument_ transmis. Le .post la fonction a cette interface

post(url: string, data?: any, config?: AxiosRequestConfig): AxiosPromise;

vous devez donc appeler la fonction .post comme ceci

await axios.post(
 `http://localhost:3000/your/path/here`,
 {},
 {
   params: {
     ID: 12345,
     name: 'testUser',
   },
 },
);

@NathanielRN cette solution fonctionne mais ce n'est pas optimal. Il ajoute tous les paramètres à l'url. Similaire au "get".

@NathanielRN cette solution fonctionne mais ce n'est pas optimal. Il ajoute tous les paramètres à l'url. Similaire au "get".

@nicolardi Désolé, je ne connais pas trop les performances des requêtes d'URL. Alors que l'ajout des paramètres à l'url n'est pas optimal ? Même si c'est comme un "get" ?

Axios est le client le plus célèbre du moment, mais il a un tel défaut. Décevant.

Réouverture pour enquête

Voici la chose : le problème n'est pas avec Axios. Si vous utilisez cURL ou Postman avec les mêmes paramètres (méthode : Post, Body : {"something":"value"}, en-têtes définis sur json), cela fonctionne. Cependant, si vous le faites en utilisant Axios ou même Fetch API dans votre Vue, React, Angular (peu importe), vous verrez votre Chrome ou (tout autre navigateur) "changer" la méthode de demande (voir l'onglet Réseau) en OPTIONS et NON POST plus. La raison derrière cela est... CORS (Partage des ressources entre origines). Je l'ai découvert parce que je crée mon API en utilisant NestJS et j'ai oublié d'activer CORS. Lorsqu'elle est activée, la méthode de demande est conservée en tant que POST (comme nous le souhaitions) et Axios pourra renvoyer votre JSON (ou tout autre format). Certains frameworks définissent automatiquement le CORS (par exemple Laravel) là où d'autres vous devez le définir/l'activer manuellement.

Cela devrait suffire :

const formData = new FormData();
formData.append('action', 'some-action');
formData.append('page', 1);

axios
  .post('/async/index.php', formData, {
    retry: 3,
    retryDelay: 100,
  })
  .then(res => {
    console.log('get', res.data);
  })
  .catch(console.log);

PHP

print_r($_POST);

solution de @jonataswalker est la meilleure approche pour gérer le POST avec Axios. L'utilisation de FormData() a fonctionné pour moi.

donc j'ai un peu le même problème. J'utilise Vue.js pour mon front et j'ai découvert que depuis que j'ai fait la mise à jour vers la dernière version (axios et vue), je ne peux en aucun cas envoyer les données. dans mon dernier projet, je pouvais envoyer des données dans n'importe quel format.

Dans les anciennes versions, cela fonctionnait bien et dans la mise à jour, cela ne fonctionnait pas du tout.

axios.post('/actions/posts/create_questionnaire' , { questionnaire : form })

mon conseil si le message ne fonctionne pas, essayez d'utiliser une ancienne version d'axios et le freamwork que vous utilisez.

J'ai rencontré ce problème avec un backend Django. Heureusement, j'ai une solution de contournement en utilisant GET mais axios.post ne fonctionne certainement pas comme documenté.

Il se peut que ce ne soit pas un problème axios mais cors.
Si vous publiez du serveur de nœud vers le backend php, votre script php doit avoir cors :

https://stackoverflow.com/a/55392661

et n'utilisez pas non plus $_POST mais $data = file_get_contents('php://input');

Cela semble fonctionner pour récupérer la valeur $_POST en PHP :

    axios.post(url, {test: 'dafasfasfa'},{
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            "Access-Control-Allow-Origin": "*"
        }
    })

J'ai finalement réussi à faire fonctionner cela avec un backend django (avec cors installé et configuré) comme celui-ci, en utilisant une combinaison des idées de @alvarotrigo et de @latanoel :

const formData = new FormData();
formData.append('a1', this.form.a1);
formData.append('a2', this.form.a2);
formData.append('a3', this.form.a3);

axios
  .post(url, formData, {
    headers: {
      'Content-type': 'application/x-www-form-urlencoded',
    }
  })
etc

Lorsque vous incluez les arguments POST en ligne comme le suggèrent les documents, POST est vide dans le backend. De plus, vous ne pouvez pas définir Access-Control-Allow-Origin car cela viole cors.

Aussi, cam à travers cette méthode aussi
const paramsCompose = (formData) => { const str = []; for (let p in formData) { str.push(encodeURIComponent(p) + '=' + encodeURIComponent(formData[p])); } const body = str.join('&'); console.log('PARAMS ' + body); return body; };

Alors vous ...
return axios.post(url, paramsCompose({ image_url: image_url, cover_name: cover_name })) .then(res => { const tx = res.data; console.log(tx); return res.data });

Après quelques jours et en essayant toutes les options précédentes... Je n'ai toujours pas réussi à résoudre le problème.

Ce que nous avons, en fait, c'est :

  • La méthode "post" d'Axios ne fonctionne pas comme documenté ;
  • Exécuter un simple appel 'post' à un service REST est devenu un enfer, avec Axios ;

Je n'arrive pas à croire que c'est sérieux... désolé mais je reviendrai pour utiliser une autre API. Au revoir Axios.

@fabriciobraga J'essayais de comprendre pourquoi cela se produisait également dans mon application. J'ai passé toute la journée à parcourir Internet à la recherche de la solution. Cependant, j'ai découvert que c'était un problème très simple. Ma création d'utilisateur action ressemblait à ceci au début :

createUser(context, user) {
    this.$axios.$post("/api/users/", user).then(response => {
      context.dispatch("fetchUsers");
    });
 }

Le paramètre user est un objet contenant les email et password du nouvel utilisateur. J'ai essayé de console.log l'objet utilisateur et il a signalé que les propriétés n'étaient pas définies ! 🤔

Screen Shot 2020-01-27 at 10 00 04 PM

J'ai donc diffusé l'objet utilisateur en le passant à la méthode $post et maintenant ça marche !

 this.$axios.$post("/api/users/", {...user})

Dans mon cas, l'objet utilisateur était envoyé en tant qu'objet vide et mon API l'a signalé. Si vous rencontrez le même problème, vous devriez peut-être essayer ceci.

Un autre scénario possible est que vos données sont envoyées correctement mais pas dans le format attendu par votre API (par exemple, un format courant pour les scripts PHP est form-data alors que la plupart des API Node.js attendent JSON). Vous devez donc comprendre cela; voir les discussions ci-dessus .

Même problème apparemment
axios.post("api", { API: 1, version: "0.1b"...})....
Résultats avec une API et une version vides lors de l'atteinte de mon serveur de repos Java.
Lors de l'envoi en tant que 3ème paramètre, c'est-à-dire
axios.post("api", null, { params: {API: 1, version: "0.1b"...}})....
Cela fonctionne comme prévu

C'est l'un des problèmes les plus commentés et les plus ouverts. Croyez-moi, j'ai lu tous les commentaires de ce fil. De nombreux utilisateurs se sont trompés sur la façon de publier des données par axios. Quelqu'un a donné ses résultats ou ses conclusions et les nouveaux utilisateurs ont encore raté leur chemin.

N'oubliez pas qu'axios n'est qu'un client de requête. Si vous n'avez pas vu la réponse attendue, vérifiez si les éléments envoyés par axios correspondent à ce que le serveur attend. Voici mes principales étapes pour résoudre les problèmes post ou même tous les axios. Et j'espère également que les utilisateurs pourront ouvrir un problème avec les réponses aux questions suivantes. Peut-être mettre à jour le modèle de problème plus tard.

  1. De quel côté avez-vous exécuté vos codes ? Le navigateur ou le côté serveur.
  2. Quels paramètres voulez-vous envoyer ? Doit-on utiliser config.params ou config.data ?
  3. Si params , comment les encoder ? La valeur par défaut config.paramsSerializer est-elle suffisante ou doit-elle être personnalisée ?
  4. Si data , les avez-vous encodés avec le bon en-tête content-type ? La plupart des problèmes de publication ont échoué ici.

    1. L'en-tête application/json nécessite JSON.stringify et l'en-tête application/x-www-form-urlencoded nécessite qs.stringify .

    2. La valeur par défaut config.transformRequest définira application/x-www-form-urlencoded pour URLSearchParams et application/json pour les objets Javascript. Veuillez vérifier les codes sources dans lib/defaults.js pour obtenir une compréhension précise.

  5. Avez-vous rencontré d'autres problèmes, c'est-à-dire CORS/ATS/Promises, et savez-vous comment les résoudre ?

Je sais qu'ils ont l'air complexes et je prévois d'écrire un tutoriel expliquant aussi détaillé que possible. Mais je ne suis pas un locuteur natif et un peu inquiet de mon niveau d'article. Pardonnez-moi de le verrouiller et s'il vous plaît attendez que mon ou quelqu'un de la communauté donne un document bien écrit. Ceci est open source. Nous avons besoin de la contribution de chacun.

Cette page vous a été utile?
0 / 5 - 0 notes