Axios: POST-Daten in Axios nicht möglich

Erstellt am 21. Nov. 2017  ·  62Kommentare  ·  Quelle: axios/axios

Ich verwende diesen Code, um die Daten an die Web-API zu senden
var param = {
Argumente: {
myStringVal: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3'
}
};

Axios ({
Methode: 'post',
URL: 'api/Application/Action/MyWebAPIMethod',
Daten: JSON.stringify(param),
});

und mein Web-API-Code sieht so aus:
öffentliche Klasse MyClassVM
{
öffentliche Zeichenfolge myStringVal { erhalten; einstellen; }
}
öffentliche MessageVMMyWebAPIMethod(MyClassVM-Argumente){
// Mein Code kommt hierher
}

Problem ist: Wenn ich myStringVal übergebe: '979251e4-6c9f-460d-ba32-1b6fe58ce8a3' gibt es mir null in der Web-API [args.myStringVal = null ].

Wie kann ich die Werte in axios POST übergeben.

Vielen Dank im Voraus

Hilfreichster Kommentar

Ich habe vor kurzem begonnen, von der Verwendung von jQuery für AJAX-Arbeiten zu Axios zu wechseln, nur weil es der letzte Schrei zu sein scheint. Aber ich war schockiert zu erfahren, dass ich keinen einfachen POST machen kann.

Also, hier ist, was ich zuerst versucht habe:

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

Auf dem Backend (mit PHP) war $_POST komplett leer. Also habe ich etwas gegoogelt, und das funktioniert (mit der Verwendung einer Polyfill, seufz):

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

Das funktioniert. Also muss ich URLSearchParams verwenden? Nun, das war frustrierend, weil die Dokumentation zeigt, dass die erste Methode funktionieren sollte.

Hat noch jemand dieses Problem?

Alle 62 Kommentare

@awais-ilyas , ich glaube nicht, dass Sie die POST-Nutzlast normalerweise stringifizieren würden. Versuche dies:

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

Was data im POST-Body setzen sollte.

Ich habe vor kurzem begonnen, von der Verwendung von jQuery für AJAX-Arbeiten zu Axios zu wechseln, nur weil es der letzte Schrei zu sein scheint. Aber ich war schockiert zu erfahren, dass ich keinen einfachen POST machen kann.

Also, hier ist, was ich zuerst versucht habe:

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

Auf dem Backend (mit PHP) war $_POST komplett leer. Also habe ich etwas gegoogelt, und das funktioniert (mit der Verwendung einer Polyfill, seufz):

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

Das funktioniert. Also muss ich URLSearchParams verwenden? Nun, das war frustrierend, weil die Dokumentation zeigt, dass die erste Methode funktionieren sollte.

Hat noch jemand dieses Problem?

@dlgoodchild Versuchen Sie, es als Formulardaten zu senden? Ich fand, dass mein POST-Körper auch leer war, aber ich musste dies verwenden, um ihn in etwas Formähnliches umzuwandeln:

   ...
      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('&')
        }
      ],
   ...

Einverstanden, die POST-Funktion muss überarbeitet werden.

Ahh guter Ansatz! Für alle, die hier landen, habe ich es am Ende in 3 Varianten zum Laufen gebracht:

  1. Formulardaten
  2. URLSearchParams
  3. querystring.stringify (Teil von Node)

Das Problem mit den ersten beiden Optionen ist die Browserkompatibilität (überprüfen Sie dies bei caniuse.com). Das letzte ist eine weitere Abhängigkeit.

Ich war mir der Option transformRequest nicht bewusst, das sieht gut aus und ist eine großartige Option, wenn Sie Abhängigkeiten minimieren und browserübergreifend arbeiten möchten, insbesondere für ältere Versionen.

Ich denke, die Dokumentation macht Axios für viele Menschen frustrierend. Die Anzahl der StackOverflow-Fragen in Bezug auf POST mit Axios ist ein guter Hinweis darauf, dass irgendwo ein Problem und ein allgemeines Missverständnis vorliegt.

Habe das gleiche Problem - habe ein paar Stunden mit Recherche verbracht und endlich dieses Problem gefunden. Gedanken: POST sollte nicht kompliziert sein und keine Abhängigkeiten oder zusätzliche Konfiguration erfordern. Das fühlt sich wieder wie AngularJS 1 an. Ich werde die Verwendung dieser Bibliothek vorerst weitergeben.

@yuri-wisestamp könnte nicht mehr zustimmen, es ist eine sehr seltsame/ungewöhnliche Designwahl. Ich habe jetzt größtenteils aufgehört, es zu verwenden, da ich mich von den Stunden, die ich beim Debuggen verloren habe, verschmäht fühlte, weil es an guter Dokumentation mangelte, um dies von Anfang an festzulegen.

Posten mit Axios und PHP ist ein wahrer Alptraum!

Ich verbrachte zwei Stunden, ohne ein Ergebnis zu erzielen ...

Nicht formularcodierte Posts füllen $_POST nicht in PHP. Sie müssen den Post-Body lesen:

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

wenn Sie json erwarten:

$json=json_decode($body);

Dieser Code:

axios = require('axios');

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

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

Dagegen im Server:

<?php

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

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

Produziert diese Ausgabe:

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

)

Ich habe mein Problem so gelöst:

Vorderseite

✋userSearchParams() funktioniert nicht überall ( 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) ) ;

Zurück

print_r( $_POST ); 

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

Ich habe meine zum Laufen gebracht, indem ich qs installiert habe.

          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 Danke! Ich habe meine auch mit qs.stringify zum Laufen gebracht! Verdammt, ich wollte gerade aufhören, Axios zu verwenden, da ich meine POST-Anforderungen nicht richtig zum Laufen bringen konnte!

Vielen Dank!

Ich habe tatsächlich eine bessere Lösung gefunden, ohne dass eine externe Bibliothek erforderlich ist. Der Post-Request-Header ist auf form gesetzt. Sie müssen den Header ändern, wenn Sie ein JSON-Objekt senden

        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 Vielen Dank!

Ich verstehe wirklich nicht, warum POST nicht funktioniert. Die Header von Legym beheben es nicht für mich.
jquery hat beim ersten Versuch funktioniert, also weiß ich nicht, was los ist.

Der URLSearchParams-Ansatz funktioniert nicht für Safari in macOS.

Hat jemand in der Lage gewesen, eine Datei und Daten über Axios zu POST?
Ich verwende das Laravel-Framework von PHP.

@latanoil Ehrlich gesagt hat die Verwendung von Axios wenig bis gar keinen Vorteil. Halten Sie sich am besten an eine einfachere, besser unterstützte und besser dokumentierte Ajax-Bibliothek. Jquery ist erprobt und getestet und funktioniert einwandfrei, und Sie werden keines der hier gefundenen Probleme haben.

Danke @dlgoodchild für den Rat. Ich habe jetzt seit ein paar Tagen damit zu kämpfen. Ich bleibe einfach bei jQuery.

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

Arbeite so, verwende _params_, nicht _data_

LOL Ich kann nicht glauben, dass es so schwer war, es zum Laufen zu bringen.

Etwas _dieses_ Grundlegendes, _dieses_ ... _allgemeines_, sollte NICHT schwierig sein.

@HellsingMatt nein hat bei mir nicht funktioniert. Es ist möglich, dass Sie das mit $_GET verwechselt haben. Weil 'params' das ist, was ich verwendet habe, um es für GET zum Laufen zu bringen. Aber mit POST hat es bei mir nicht funktioniert.

@mallochine interessant, ich verwende _params_ mit POST in node.js

@HellsingMatt ok. Ich verwende PHP. Es sieht so aus, als würde axios mit PHP komplett scheißen. Verwenden Sie ein PHP-Backend?

@mallochine hat noch nie PHP gelernt, mein ganzes Backend benutzt node.js

Ich verwende PHP. Keine Probleme.
In einigen Fällen möchte ich (normalerweise) json, also setze ich den Header entsprechend. In Fällen, in denen ich $_POST aufgefüllt haben möchte, verwende ich eine Bibliothek wie qs oder meine eigene kleinere, einfachere Implementierung (die nicht alle Fälle verarbeiten würde, aber für mich angemessen ist), um sie in eine Abfragezeichenfolge zu konvertieren.

Ein Beispiel für eine solche Funktion finden Sie in diesem SO-Beitrag: https://stackoverflow.com/a/1714899/6728516

Diese Eigenart von Axios wird schon lange in der Hauptdokumentation angesprochen, obwohl sie zugegebenermaßen etwas aussagekräftiger sein könnte.

Ich finde die Verwendung von JSON im Allgemeinen so viel vielseitiger, dass ich dies selten mehr mache. Siehe meinen Kommentar oben für eine Methode zum Abrufen des geposteten JSON in PHP.

Blutige Hölle.

Ich wollte die Standard-API-Funktionalität für Formulare nicht unterbrechen, also musste ich Fallback hinzufügen.

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

Zum Glück hatte ich Zugriff auf die PHP-Seite, wenn es eine externe API wäre, wäre ich §§§ . Es sollte eine Warnung darüber geben, wenn alle Ajax-Clients für vue aufgelistet werden :)

Es funktioniert bei mir mit "params", und ich verwende PHP damit.
Beachten Sie, dass dies Axios in nativescript-vue 2.0.0 ist.

@HellsingMatt Danke!

Ich habe meine zum Laufen gebracht, indem ich qs installiert habe.

          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

Bitte posten Sie den PHP-Backend-Code mit allen Cors-Headern und Inhaltstypen. Ich habe beide Axios ausprobiert und fetch funktioniert nicht.

Es scheint ein Fehler in der Dokumentation zu sein, sollte aber das Params-Objekt verwenden, keine Daten und es funktioniert. Ich habe 2 Stunden gebraucht, um es zu verstehen ((

 Axios ({
 Methode: 'post',
 url: 'url',
 Parameter: {
 Schlüsselwert
 }
 })

Vielen Dank Daniil. Ich schätze Ihre Hilfe. Danke, dass du mir das mitteilst
Error.

Am Samstag, 10. November 2018 um 11:18 Uhr schrieb Daniil [email protected] :

Es scheint ein Fehler in der Dokumentation zu sein, sollte aber das Params-Objekt verwenden, nein
Daten und es funktioniert. Ich habe 2 Stunden gebraucht, um es zu verstehen ((

Axios ({
Methode: 'post',
URL: '/wp-admin/admin-ajax.php?action=data_fetch',
Parameter: {
Schlüsselwert
}
})


Sie erhalten dies, weil Sie kommentiert haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/axios/axios/issues/1195#issuecomment-437612819 oder stumm
der Faden
https://github.com/notifications/unsubscribe-auth/ApIWeUP45k17b70vsaT80KR1g_cxXcMvks5utyZzgaJpZM4Ql8j5
.

Ich habe mein Problem so gelöst:

Vorderseite

✋userSearchParams() funktioniert nicht überall ( 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) ) ;

Zurück

print_r( $_POST ); 

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

Es hilft so sehr, danke!

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

Arbeite so, verwende _params_, nicht _data_

funktioniert auch für mich, danke, viel sauberer Ansatz.

Ich habe bereits eine Axios-Instanz mit der Basis-URL erstellt.

Ich möchte einen Beitrag mit dieser Instanz erstellen. Was ist die richtige Einstellung?

Das funktioniert:

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

Das funktioniert nicht:

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

Ich habe 15 Tage damit verbracht, dieses Problem zu lösen :( Hier ist der 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);
    });

Das ist einfach schrecklich. So eine lange Diskussion, um nur eine POST-Anfrage zu senden, und am Ende haben wir noch keine konkrete Lösung.

Ich stehe vor dem gleichen Problem und habe bereits 3 Tage damit verbracht. Ich habe alle möglichen Kombinationen und Optionen ausprobiert und befinde mich immer noch in derselben Situation. Daher ist mein Backend auch in PHP geschrieben, ich habe auch das Gefühl, dass axios große Probleme mit der Kombination von POST und PHP hat, was einfach nicht akzeptiert wird!!

jQuery handhabt diese Dinge außergewöhnlich gut und ich werde wieder darauf zurückgreifen. Ich möchte keine zusätzlichen Abhängigkeiten installieren, nur um eine POST-Anfrage zu senden!

Außerdem wird der Thread ohne eine richtige Lösung geschlossen !!

Es wurde von @awais-ilyas geschlossen, er sollte es idealerweise wieder öffnen, wenn das möglich ist.

Ja! Aber der Thread bringt mich nicht weiter. Das Senden einer POST-Anfrage an PHP mit einem JSON-Objekt war immer noch ein Problem! @dlgoodchild gibt es schon eine Problemumgehung, da ich zu spät zu diesem Thread komme?

yeah @emfluenceindia In diesem Thread werden viele Problemumgehungen erwähnt, für die keine Verwendung von JSON erforderlich ist.

Ich habe sie gesehen. Bedeutet dies, dass es immer noch nicht möglich ist, als JSON zu posten?

In diesem Thread geht es nicht wirklich darum, JSON zu posten. Das Posten von JSON als Post-Body ist kein Problem, in diesem Thread geht es um die Verwendung des data:-Attributs, wie bei jQuery, und darum, dass dieses irgendwie $_POST in PHP füllt.

Ich habe vor kurzem begonnen, von der Verwendung von jQuery für AJAX-Arbeiten zu Axios zu wechseln, nur weil es der letzte Schrei zu sein scheint. Aber ich war schockiert zu erfahren, dass ich keinen einfachen POST machen kann.

Also, hier ist, was ich zuerst versucht habe:

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

Auf dem Backend (mit PHP) war $_POST komplett leer. Also habe ich etwas gegoogelt, und das funktioniert (mit der Verwendung einer Polyfill, seufz):

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

Das funktioniert. Also muss ich URLSearchParams verwenden? Nun, das war frustrierend, weil die Dokumentation zeigt, dass die erste Methode funktionieren sollte.

Hat noch jemand dieses Problem?

Ich bin heute auf dieses Problem gestoßen und habe fast einen ganzen Tag damit verbracht. es s weird because the document of axios told me to use first method which didn funktioniert nicht. Danke, Bruder

habt ihr gesetzt
app.use(express.json())
bei der app.js?

Das sollte reichen:

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

Die Antwort ist, Folgendes hinzuzufügen. Axios verwendet standardmäßig url-form-encoded.

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

Keine dieser Lösungen hat bei mir funktioniert, und ich denke, das liegt daran, dass die README-Datei für Benutzer von node.js irreführend ist, weil Sie für Post-Anfragen _ein Datenobjekt haben müssen_, da das Konfigurationsobjekt das _dritte Argument_ ist, das übergeben wird. Das .post Funktion hat diese Schnittstelle

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

Sie müssen also die Funktion .post so aufrufen

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

@NathanielRN diese Lösung funktioniert, ist aber nicht optimal. Es hängt alle Parameter an die URL an. Ähnlich wie beim „bekommen“.

@NathanielRN diese Lösung funktioniert, ist aber nicht optimal. Es hängt alle Parameter an die URL an. Ähnlich wie beim „bekommen“.

@nicolardi Tut mir leid, ich bin mit der Leistung von URL-Anforderungen nicht allzu vertraut. Während das Hinzufügen der Parameter zur URL nicht optimal ist? Auch wenn es wie ein "Get" ist?

Axios ist der berühmteste Client überhaupt, aber er hat einen solchen Fehler. Enttäuschend.

Wiedereröffnung für Ermittlungen

Hier ist die Sache: Das Problem liegt nicht bei Axios. Wenn Sie cURL oder Postman mit denselben Parametern verwenden (Methode: Post, Body: {"something":"value"}, Header auf json gesetzt), funktioniert es. Wenn Sie dies jedoch mit Axios oder sogar der Fetch-API in Ihrem Vue, React, Angular (was auch immer) tun, werden Sie sehen, dass Ihr Chrome oder (jeder andere Browser) die Anforderungsmethode (siehe Registerkarte „Netzwerk“) in OPTIONEN und NICHT „ändert“. POST mehr. Der Grund dafür ist... CORS (Cross-Origin Resource Sharing). Ich habe es herausgefunden, weil ich meine API mit NestJS erstelle und vergessen habe, CORS zu aktivieren. Wenn diese Option aktiviert ist, wird die Anforderungsmethode als POST beibehalten (wie von uns gewünscht) und Axios kann Ihr JSON (oder ein beliebiges anderes Format) zurückgeben. Einige Frameworks stellen CORS automatisch ein (z. B. Laravel), bei anderen müssen Sie es manuell einstellen/aktivieren.

Das sollte reichen:

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

Lösung von @jonataswalker ist der beste Ansatz, um POST mit Axios zu handhaben. Die Verwendung von FormData() hat bei mir funktioniert.

also ich habe das selbe problome. Ich benutze Vue.js für meine Front und ich habe herausgefunden, dass ich seit dem Update auf die letzte Version (axios und vue) die Daten in keiner Weise senden kann. in meinem letzten projekt konnte ich daten in jedem format senden.

In älteren Versionen funktioniert es einwandfrei und in den aktualisierten überhaupt nicht.

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

Mein Rat, wenn der Beitrag nicht funktioniert, versuchen Sie, eine ältere Version von Axios und dem von Ihnen verwendeten Framework zu verwenden.

Ich bin auf dieses Problem mit einem Django-Backend gestoßen. Glücklicherweise habe ich eine Problemumgehung mit GET, aber axios.post funktioniert definitiv nicht wie dokumentiert.

Es könnte sein, dass es kein Axios-Problem ist, sondern Cors.
Wenn Sie vom Knotenserver zum PHP-Backend posten, muss Ihr PHP-Skript cors haben:

https://stackoverflow.com/a/55392661

und auch nicht $_POST sondern $data = file_get_contents('php://input');

Dies scheint zu funktionieren, um den $_POST-Wert in PHP abzurufen:

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

Ich habe es endlich mit einem Django-Backend (mit installiertem und konfiguriertem Cors) wie diesem zum Laufen gebracht, indem ich eine Kombination aus den Ideen von @alvarotrigo und @latanoel verwendet habe :

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

Wenn Sie die POST-Argumente wie in der Dokumentation vorgeschlagen inline einfügen, ist POST im Backend leer. Außerdem können Sie Access-Control-Allow-Origin nicht festlegen, da dies gegen cors verstößt.

Entdecken Sie auch diese Methode
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; };

Dann Sie ...
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 });

Nach ein paar Tagen und dem Ausprobieren aller vorherigen Optionen ... habe ich immer noch keinen Erfolg bei der Lösung des Problems.

Was wir haben, ist in der Tat:

  • Die „post“-Methode von Axios funktioniert nicht wie dokumentiert;
  • Das Ausführen eines einfachen Post-Aufrufs an einen REST-Dienst wurde mit Axios zur Hölle;

Ich kann einfach nicht glauben, dass es ernst ist ... Entschuldigung, aber ich werde wiederkommen, um eine andere API zu verwenden. Auf Wiedersehen Axio.

@fabriciobraga Ich habe versucht herauszufinden, warum dies auch in meiner Anwendung geschah. Ich verbrachte den ganzen Tag damit, das Internet nach der Lösung zu durchsuchen. Ich fand jedoch heraus, dass es sich um ein sehr einfaches Problem handelte. Meine Benutzererstellung action sah zunächst so aus:

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

Der Parameter user dort ist ein Objekt, das die email und password des neuen Benutzers enthält. Ich habe versucht, das Benutzerobjekt console.log zu console.log und es hat gemeldet, dass die Eigenschaften nicht definiert sind! 🤔

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

Also habe ich das Benutzerobjekt verteilt, wenn ich es an die $post- Methode übergebe, und jetzt funktioniert es!

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

In meinem Fall wurde das Benutzerobjekt als leeres Objekt gesendet und meine API hat dies gemeldet. Wenn Sie vor dem gleichen Problem stehen, sollten Sie dies vielleicht versuchen.

Ein weiteres mögliches Szenario ist, dass Ihre Daten gut gesendet werden, aber nicht in dem Format, das Ihre API erwartet (z. B. ist ein gängiges Format für PHP-Skripts form-data, während die meisten Node.js-APIs JSON erwarten). Sie müssen das also herausfinden; siehe die Diskussionen oben .

Habe anscheinend das gleiche Problem
axios.post("api", { API: 1, version: "0.1b"...})....
Ergebnisse mit leerer API und Version beim Erreichen meines Java-Rest-Servers.
Beim Senden als 3. Parameter, dh
axios.post("api", null, { params: {API: 1, version: "0.1b"...}})....
Es funktioniert wie erwartet

Dies ist eines der am häufigsten kommentierten und geöffneten Probleme. Glaubt mir, ich habe jeden Kommentar in diesem Thread gelesen. Viele Benutzer waren verwirrt, wie man Daten mit Axios postet. Jemand hat seine Treffer oder Schlussfolgerungen angegeben und neue Benutzer haben ihre Anweisungen wieder verpasst.

Denken Sie daran, dass Axios nur ein Anfrage-Client ist. Wenn Sie die erwartete Antwort nicht sehen, überprüfen Sie, ob die Dinge, die Axios sendet, mit den Erwartungen des Servers übereinstimmen. Hier sind meine wichtigsten Schritte zur Lösung von Post- oder sogar allen Axios-Problemen. Und ich hoffe auch, dass Benutzer Probleme mit den folgenden beantworteten Fragen eröffnen können. Aktualisieren Sie die Problemvorlage möglicherweise später.

  1. Auf welcher Seite hast du deine Codes ausgeführt? Der Browser oder die Serverseite.
  2. Welche Parameter möchten Sie senden? Sollte config.params oder config.data verwendet werden?
  3. Wenn params , wie werden sie codiert? Ist die Voreinstellung config.paramsSerializer ausreichend oder sollte eine angepasste verwendet werden?
  4. Wenn data , haben Sie sie mit dem richtigen content-type -Header codiert? Die meisten Post-Probleme sind hier gescheitert.

    1. Der Header application/json erfordert JSON.stringify und der Header application/x-www-form-urlencoded erfordert qs.stringify .

    2. Der Standardwert config.transformRequest setzt application/x-www-form-urlencoded für URLSearchParams und application/json für Javascript-Objekte. Bitte überprüfen Sie die Quellcodes in lib/defaults.js , um ein genaues Verständnis zu erhalten.

  5. Sind Sie auf andere Probleme gestoßen, dh CORS/ATS/Promises, und wissen, wie man sie löst?

Ich weiß, dass sie komplex aussehen, und ich plane, ein Tutorial zu schreiben, das so detailliert wie möglich erklärt wird. Aber ich bin kein Muttersprachler und mache mir ein wenig Sorgen um mein Artikelniveau. Vergib mir, es zu sperren, und warte bitte, bis mir oder jemandem aus der Community ein gut geschriebenes Dokument vorliegt. Dies ist Open-Source. Wir brauchen den Beitrag aller.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen