Axios: Inhaltstyp application/x-www-form-urlencoded

Das sollte so funktionieren, wie du es gezeigt hast. Klingt nach einem Fehler. Ich werde es mir ansehen.

Die Ursache sind Abfangjäger. Ich kann keine Anfrage mit diesem Inhaltstyp senden, nur wenn ich Interzeptoren verwende.

Hier ist mein Code:

axios.interceptors.request.use(function (config) {
        var token = LoginStore.getJwt();
        if (token) {
            config.headers["Authorization"] = "Bearer " + token;
        }

            return config;
        }, function (error) {    
            return Promise.reject(error);
        });

Im Interceptor kann ich den Header „Content-Type“ sehen, aber er wird nicht an den Server gesendet.
Setze ich Interzeptoren richtig ein?

Irgendwelche Updates dazu? Ich habe das gleiche Problem. Axios sendet den von mir eingestellten Header nicht.

Dies scheint die schuldige Zeile zu sein → https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L117

Irgendeine Idee, warum der Header Content-Type entfernt wird, bevor die Anfrage gesendet wird?

Eine Workaround-Option besteht darin, Ihre data in data || {} zu ändern, wenn Sie eine Axios-Anfrage stellen. Dadurch wird sichergestellt, dass die Daten nicht undefiniert sind.

Es sieht so aus, als ob die Logik zum Entfernen Content-Type , wenn requestData undefined ist, in diesem Commit https://github.com/mzabriskie/axios/commit/9096d34186d5a5148f06c07854b21d6cc8035e96 kam. Es gibt jedoch keinen Hinweis darauf, warum es hinzugefügt wurde.

Ich würde abstimmen, wenn requestData undefined und Methode PUT , POST oder PATCH ist und kein Content-Type hat festgelegt wurde, dann standardmäßig Content-Type auf application/x-www-form-urlencoded . Andernfalls ehren Sie einfach, was angegeben wurde.

@mzabriskie Aber in dem von @alborozd bereitgestellten Codeausschnitt ist data auf Querystring.stringify({...}) gesetzt, also sollte requestData nicht undefined sein, richtig?

@mzabriskie Ich denke du hast recht. Wenn ich Request Interceptor Fiddler verwende, zeigt er, dass die Daten leer sind. Ohne Interceptor kann ich Daten und Header sehen und es funktioniert gut.

Wahrscheinlich tritt das Problem also auf, wenn Sie mit Abfangjägern arbeiten.

Es wird kein Abfangjäger benötigt, um dieses Ding zum Absturz zu bringen. Ich habe die Standardwerte für den Header des Inhaltstyps axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; festgelegt, und ich kann keine Nutzlast im POST-Body senden.

Ich habe eine Problemumgehung mit URLSearchParams verwendet:

    var params = new URLSearchParams();
    params.append('email', email);
    return (dispatch) => {
        axios.post('/stack/' + uri, params)

Dies wird jedoch von Safari und IE nicht unterstützt.

Bearbeiten: Okay :) Nächstes Update zur Problemumgehung. Eine vollständig unterstützte Problemumgehung besteht darin, Daten als Abfragezeichenfolge zu senden.
data: "flashcard=" + JSON.stringify(flashcard) + "&stackUri=" + stackUri . Es tut weh, aber es wirkt 👍

Sie können stattdessen eine Bibliothek wie qs verwenden:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

das ist keine lösung. Was ist der Unterschied, wenn ich "Querystring" oder "qs" verwende? Das Problem ist, dass der Header ['Content-Type'] = 'application/x-www-form-urlencoded' wegen Abfangjägern leer ist.

Irgendwelche Updates hier? Weil ich heute 1 Stunde verloren habe, um zu recherchieren, warum meine POSTs die API nicht beeinflussen (bis ich an dieses Problem erinnerte) ... Oder gibt es keine Pläne, das zu beheben, und es ist besser, woanders hinzugehen?

Ich habe das gleiche Problem ... warte immer noch auf die Lösung ...

Bitte öffnen Sie @nickuraltsev erneut , da dies von Ihrer Lösung nicht behoben wird.

+1 für Ausgabe.

Ich verwende einen Interceptor mit qs-Bibliothek, um dieses Problem zu lösen. Funktioniert gut für mich.

import qs from 'qs';

axios.interceptors.request.use((request) => {
  if (request.data && request.headers['Content-Type'] === 'application/x-www-form-urlencoded') {
      request.data = qs.stringify(request.data);
  }
  return request;
});

+1 für Ausgabe.

hyanmandian kommentierte vor 14 Stunden
Ich verwende einen Interceptor mit qs-Bibliothek, um dieses Problem zu lösen. Funktioniert gut für mich.

Großartig, aber es ist meiner Meinung nach keine Möglichkeit, Probleme in Bibliotheken zu lösen, indem eine andere installiert wird.

Sie können der Konfiguration einfach ein data: {} hinzufügen, damit der Interceptor die von uns angegebenen Header nicht überspringt.

Das habe ich gemacht, und es hat bei mir funktioniert:

import request from 'axios'

export const playSound = (soundFile) => (dispatch) => {
    dispatch(playSoundPending());
    return request
    .get(`/play/audio/${soundFile}`, { headers: {'Content-Type': 'audio/x-wav'}, data: {} })
    .then(response => response.data)
    });
};

Dadurch wurde Content-Type von application/json in audio/x-wav für mich in den Anforderungsheadern auf der Registerkarte „Netzwerk“ geändert.

Wurde das schon behoben? Ich kann anscheinend meinen Inhaltstyp mit keiner der hier geposteten Lösungen festlegen.

Ich habe das gleiche Problem, irgendeine Hilfe?

Ich habe das Problem mit encodeURIComponent gelöst:

statisches getToken(Benutzername, Passwort) {
Rückgabe Axios ({
Methode: 'post',
url: 'Endpunkte',
Daten: Username=${**encodeURIComponent**(username)}& password=${**encodeURIComponent**(password)}& Grant_type=password
})

stoßen. Man würde definitiv davon ausgehen, dass wenn man Vorgaben setzt, diese immer respektiert werden. Axios ignoriert die Standardeinstellungen in bestimmten Kontexten definitiv und verursacht Probleme für arme Leute.

Hier ist eine spezifischere Zusammenführung, wo dies passiert ist: https://github.com/mzabriskie/axios/pull/195/files

+1 für dieses Problem.
Ich habe über 3 Stunden damit verbracht, herauszufinden, was mit meiner Tomcat-Konfiguration nicht stimmt, und anscheinend wurden meine Header auf dem Weg zum Server gestohlen. Problemumgehungen haben nicht geholfen. Gott schütze die Überschriften!

@polyakoff wie hast du das gelöst? oder steckst du immer noch fest. Was ich beobachtet habe, ist, dass dieses Problem zeitweise auftritt

@usopan Immer noch hängen.

Als Problemumgehung bin ich für diese spezielle Anfrage zu isomorphic-fetch gewechselt.
Die Dinge scheinen in den meisten Browsern in Ordnung zu sein, aber in bestimmten Safari-Versionen funktionieren sie immer noch nicht.
Ich fange an zu glauben, dass Safari mich verarscht.

+1 für dieses Problem.

Ich habe die Lösung gefunden. Die Lösung besteht darin, den Browser zu erkennen.
Verwenden Sie in Chrome - https://github.com/ljharb/qs , um JSON-Daten in Zeichenfolgen zu analysieren und den Content-Type-Header festzulegen
Verwenden Sie in Safari - FormData als Body und setzen Sie keinen Content-Type-Header

Ich kann mir nicht vorstellen, dass ein solches Problem nicht schon seit über einem halben Jahr behoben wird.

wow schöne sache! Ich warte immer noch auf das Update ☕️

es nervt.

es ist scheiße + 1

+1

+1

+1

+1

+1

+1

+1

+1

+1

const querystring = require('querystring');

Anmeldung(){
var _this = dies;
dies.$http({
url: url,
Methode: 'post',
Daten: querystring.stringify({
Email Email,
Passwort: pass
}),
Überschriften: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(Funktion (Antwort) {
console.log (Antwort);
}).catch(Funktion (Fehler) {
console.log (Fehler);
});
}

+1

+1

+1

Zusammenfassend sind also alle mit Content-Type: application/x-www-form-urlencoded gesendeten Anfragen:

• Die Payload wird nicht automatisch codiert
• Der Header wird nicht gesetzt, obwohl er angegeben wurde

Die Problemumgehung besteht vorerst darin, data: {} so festzulegen, dass der Header festgelegt wird, und die Nutzlast der Anforderungsdaten manuell zu codieren

Ich teile meinen Code:

import qs from 'qs'
...

const instance = axios.create({
  baseURL: config.api.host,
  responseType: config.api.responseType,
  timeout: config.api.timeout,
  data: {},
})

instance.interceptors.request.use((req) => {
  if (req.method === 'post') {
    req.headers['Content-Type'] = config.api.defaults.postContentType
    req.data = qs.stringify(req.data)
  }

  return req
}, (error) => Promise.reject(error))

Das scheint bei mir zu funktionieren

Hallo Leute! Ich frage mich, ob ich einen Fork machen und eine Lösung mit einer kleinen nativen Abfrage-Parsing-Methode bereitstellen sollte? Wird es ein gutes „Muster“ für Schöpfer sein? @mzabriskie Möchtest du so etwas integrieren?

Verbringen Sie mehr als 3 Stunden, um sich mit dieser Ausgabe zu befassen. @Maxwell2022 können Sie bitte mit einigen Beispieldaten codieren?

+1

1

+1

@bsjaffer Ich habe das Codebeispiel gepostet, was willst du noch?

@ Maxwell2022 Ich bin jetzt gut damit.

+1

+1

+1

+1

+1

+1

+1

++1

Mach das einfach, hoffe es hilft.

let details = {
      key1: 'data1',
      key2: `data2`,
      key3: `data3`,
    };

    var formBody = [];
    for (var property in details) {
      var encodedKey = encodeURIComponent(property);
      var encodedValue = encodeURIComponent(details[property]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    const URL = `PUT-YOUR-API-URL-OVER-HERE`;
    return axios({
      method: 'POST',
      url: URL,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      data: formBody,
    })
    .then(res => res.data)
    .catch(error => { throw error });

+1

Ja, Sie haben es erraten, +1

+1

+1

+1, die Lösung von reznord hat gezaubert (Einstellungsdaten neben Headern):
const config = { headers: { 'Content-Type': 'multipart/form-data' }, data: {} };

@bruddah cool, froh, dass es funktioniert hat.

_Gesendet von meinem OnePlus ONEPLUS A3003 mit FastHub _

+1

Die Verwendung von qs funktioniert für mich!

In React hat das bei mir funktioniert:

import axios from 'axios';
import querystring from 'querystring';

const data = querystring.stringify({id:32, name:'john'});
axios.post('http://example.com/posturl', data)

Der Grund dafür ist, dass axios Post-Daten nicht automatisch kodiert, bevor sie dem Hauptteil der HTTP-Anfrage hinzugefügt werden, sodass sie vor dem Senden der Anfrage kodiert werden müssen. Das macht die Abfragezeichenfolge. Es nimmt {id:32, name:'john'} und erzeugt so etwas wie id=32&name=john und dann legt Axios das als Hauptteil der Post-Anforderung fest.

Sie können dies testen, indem Sie die folgende Anfrage stellen:

axios.post('http://example.com/posturl', 'id=32&name=john')

Das sollte das gleiche Ergebnis wie der obige Code haben.

immer noch nicht behoben mehr als ein Jahr seit der Eröffnung ....

+1

+1

Hallo Leute! Sie können dies versuchen, es funktioniert gut für mich, aber ich weiß nicht warum.

get (url, data) {
    return axios({
      method: 'get',
      url: url,
      baseURL: 'http://xxxxx/api',
      timeout: 10000,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      },//this is important !
      data: data,//this is important !
      params: data//this is important !
    }).then(
      (response) => {
        console.log(response)
        return checkStatus(response)
      }
    )
  }

Versuch, _Content- Type:application/json-patch+json_ in einer Patch -Anfrage zu senden (nach RFC6902 ),
Folgendes hat bei mir funktioniert (ich habe den richtigen Typ in den Anforderungsheadern):

axios.patch(
          url,
          data,
          { headers: { 'Content-Type': 'application/json-patch+json;charset=UTF-8' } }  
          ))

Für diejenigen, die dieses Problem haben, weil der Interceptor die Header überschreibt, verwenden Sie einfach in Ihrem Interceptor:

config.header['yourheader'] = value;

anstatt

config.header = {'yourheader': value}

@ DavidJiang7 Lösung sollte funktionieren

Das funktioniert bei mir:

static register(token, email, lang)
{
        let config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }; // we do it to send SIMPLE post eequest (to avoid send CORS OPTIONS request before post)
        let params = new URLSearchParams(); // and we cannot send json but params are transform to  url-style
        params.append('email', email);
        params.append('lang', lang);

        return axios.post(ENV.API_URL + '/device/' + token + '/register', params, config);
}

Interessantes Bild, das CORS-Fälle HIER zeigt. Die OPTIONS-Anfrage wird nicht gesendet, wenn wir die SIMPLE-Anfrage senden. Eine einfache Anfrage ist eine Anfrage, die GET, HEAD, POST ist und einen Header „content-type “ hat, der gleich ist application/x-www-form-urlencoded , multipart/form-data oder text/plain und alle benutzerdefinierten Header.

Mach das einfach

const data = {name: 'my name'}
const form = 'data=' + JSON.stringify(data)
axios.post('/my_url', form)

Bearbeitet
Entschuldigung für den Tippfehler. und es funktioniert für mich Ich benutze das seit Monaten.
Ich habe vergessen zu erwähnen, dass Sie auf dem Server nur den Parameter data haben

...
 $data = json_decode($_POST['data'], 1);
 echo $data['name']; // my name
...

Bump für eine saubere Lösung, auch bereit zu helfen.

@jesusantguerrero
Mach das einfach

const data = {name: 'mein Name'}
const form = 'data=' + JSON.stringfy(data)
axios.post('/meine_url', Formular)

funktioniert nicht, aber es ist JSON.stringify ^^tippfehler oben.

Für diejenigen unter Ihnen, die Node.js verwenden, funktioniert dies. Vielen Dank an alle im Thread. Ich habe im Grunde eine Reihe von Lösungen und Verweisen auf die Node.js-Dokumente kombiniert

Das ist das Sauberste, was ich mir vorstellen konnte.

import { URLSearchParams } from 'url';

async function auth() {
  try {
    const config = {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    };
    const params = new URLSearchParams();
    params.append('grant_type', 'client_credentials');
    params.append('client_id', configuration.yelpClientId);
    params.append('client_secret', configuration.yelpClientSecret);

    const { data } = await axios.post(
      YELP_AUTH_ENDPOINT,
      params.toString(),
      config,
    );

    return data;
  } catch (error) {
    console.log(error.response.data);
    return {};
  }
}

Verwenden Sie Parameter anstelle von Daten

axios({
    method: 'post',
    url: '/my/api',
    headers: {
        'Content-type': 'application/x-www-form-urlencoded'
    },
    params: {
        'grant_type': 'code',
        'client_id': '1231453',
        'client_secret': 'THIS_IS_THE_SECRET'
    }
})
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    }
);

@skuarch
Verwenden Sie Parameter anstelle von Daten

Wenn das funktioniert, ist es bei weitem die sauberste Lösung.

@oshalygin setzt die Parameter auf die Abfragezeichenfolge, sendet nicht als Post-Variablen.

Eine Ajax-Bibliothek, die kein einfaches Formular posten kann? Wirklich?

1

weiß jemand, wer den Inhaltstyp auf application/json setzen soll.

axios.post(`${DOMAIN}${url}`,params, {'headers': {"Content-Type": "application/json;charset=UTF-8"}})

es funktioniert nicht.

@hellomrbigshot wahrscheinlich CORS-Problem (lesen Sie darüber, auch in diesem Thread)

Das für mich problematische Codestück in Axios (das Probleme hat, die Nutzlast ohne die Verwendung von URLSearchParams richtig hinzubekommen) scheint zu sein

        if (utils.isURLSearchParams(data)) {
          setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded;charset=utf-8');
          return data.toString();
        }
        if (utils.isObject(data)) {
          setContentTypeIfUnset(headers, 'application/json;charset=utf-8');
          return JSON.stringify(data);
        }
        return data;
      }

Wenn also data ein Objekt ist, das kein URLSearchParam ist (oder einer von einigen anderen Typen, auf die zuvor geprüft wird – FormData ist in der Liste und wird roh verwendet), dann wird es JSON.stringified sein und kann dazu führen, dass der Header auf application/json gesetzt wird.
Wenn ich andererseits einen String übergebe, wird er einfach so verwendet, wie er ist, also ist der Kommentar von adeelibr vom 4. Juli derjenige, der für mich und meine Formulardaten funktioniert.

Sie sollten einen Standard-Header-Typ bereitstellen. Ich habe dieses Problem mit diesem Code gelöst.
Dies ist mein Vue + Axios-Code auf der Clientseite

Vue.prototype.$http = axios;
new Vue({
    el: '#root',
    data: {
        site_url: params.site_url,
        name: '',
        description: ''
    },
    methods:{
        onSubmit(){
            var url = this.site_url + 'project/create';
            this.$http.post( url, {
                name: this.name,
                description: this.description
            } ).then(
                response => console.log(response.data)
            );
        }
    },
    mounted(){

    }
});```
Here this.$http means axios. I using axios instead of vue resource.


My Server Side Code

if ( isset( $_POST ) ) {
$fields_to_add = array( 'name', 'description' );
$response = json_decode(file_get_contents("php://input"), true);
foreach ( $antwort als $k => $v ) {
if( in_array($k, $fields_to_add) ){
$_POST[$k] = $v;
}
}
Echo json_encode ($_POST);
Ausfahrt();
} anders{
echo json_encode( array( 'message' => 'Ungültige Anfrage' ) );
Ausfahrt();
}
```

Geben Sie Feldnamen als Liste von Feldnamen ein. Es wird es automatisch in Post umwandeln
Hoffe das hilft

+1

+1

+1

OMG 😱 Ich wusste nicht, dass das Senden einer POST-Anfrage mit einigen Anwendungs-/x-www-form-urlencodierten Formulardaten so kompliziert ist. Ich muss die README-Datei viele Male erneut lesen und verstehe falsch, dass das Datenfeld der Konfiguration mit qs.stringify() verwendet werden könnte, auch das Params-Feld.

Im Moment scheinen nur Instanzmethoden das Senden von x-www-form-urlencodierten Formulardaten zu unterstützen, wie zum Beispiel:

• axios#post(url[, data[, config]])
• axios#put(url[, data[, config]])
• axios#patch(url[, data[, config]])

+1

Nicht gelöst!

Es ist offen wie ... für immer. Die alte Anforderungsbibliothek hat es früher so einfach gemacht.

+1

+1

+1

Hier ist eine einfache Möglichkeit, dies zu tun.
Bitte lesen Sie zunächst hier: https://github.com/axios/axios#using -applicationx-www-form-urlencoded-format

Hier ist eine Lösung:

1. Gehen Sie zu: https://github.com/WebReflection/url-search-params

2. Sie können es npm installieren oder einfach die Bibliothek hier herunterladen: https://github.com/WebReflection/url-search-params/blob/master/build/url-search-params.js

3. Wenn Sie die Bibliothek heruntergeladen haben, fügen Sie sie einfach in Ihre Datei ein.

//For e.g. in your index.html, 
<script src="url-search-params.js"></script>

1. Dann machen Sie eine POST-Anfrage wie folgt:

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params)
.then(function (response)
                {
                    console.log(response.data);
                })
                .catch(function (error)
                {
                    console.log(error);
                });

Es wird wie ein Zauber funktionieren! :+1:

@aditya43 Danke!

Das kann man eigentlich auch. Dies kommt direkt von der Axios-Github-Seite. Sie müssen die codierte URL selbst erstellen, aber ich habe sie gerade getestet und sie funktioniert.

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Dieser Fehler besteht immer noch, gibt es ein Update?

@ DZuz14 Ich versuche es und es funktioniert nicht. Verwenden der Axios Globals pro Instanz und nichts.
Es scheint fest codiert zu sein.

+1

axios saugt ， verwenden Sie Anfrage für Ersatz

+1

Es funktioniert!

https://www.npmjs.com/package/form-data-urlencoded

import getFormData from 'form-data-urlencoded';

let data = getFormData({"_csrf": 'wrwrwrvwg4657rhed4hehe4',
                            "Res1[Test1]": "segf96767", 
                            "Res2[Test2]": "hello"});
let options = {
     method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
    url: 'http://fhfhfhfh/455454545/fhfhfhf',
    data
};

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios(options).then(function (response) {
              console.log(response);
    }).catch(function (error) {
             console.log(error);
        });

Ich habe den Zeichensatz (UTF-8) im "Content-Type" definiert und die obige "Interceptors" -Lösung modifiziert.
Endlich funktioniert es.

import axios from 'axios'
import qs from 'qs'

axios.interceptors.request.use((request) => {
  if (request.data && (request.headers['Content-Type'].indexOf('application/x-www-form-urlencoded') !== -1)) {
    request.data = qs.stringify(request.data)
  }
  return request
})

axios({
  method: 'POST',
  url,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  data
}).then(() => {
// DO SOMETHING
})

Ich habe nur Cors-Fälle gefunden, bei denen das Versenden von Optionsanfrage-Headern domänenübergreifende Fehler gesetzt wurden, hinter denen der Vorgang nicht implementiert wird.

+1

+1

+1

+1

+1

+1

+1

+1

+1

+1

Ich habe mit Axios angefangen, da es mir einer meiner Kollegen empfohlen hat, und der erste Versuch für mich war, das Zugriffstoken von einer funktionierenden API zu bekommen. und ich kollidiere mit diesem Fehler, und dann bin ich zu jQuery zurückgekehrt (ehrlich gesagt, ich heisse jQuery so sehr, aber es war dazu gezwungen). Also denke ich, dass es keinen besseren Weg gibt, Leute dazu zu bringen, aus dieser Bibliothek zu fliehen, als diesen alten, ungelösten Fehler.

Ich schätze all die Arbeit, die in dieser Bibliothek geleistet wird, da ich als Entwickler weiß, dass das Erstellen einer Bibliothek keine triviale Aufgabe ist, und ich hoffe, jQuery eines Tages im Stich zu lassen und wieder hierher zurückzukehren.

@HakamFostok Ich verwende erfolgreich github/fetch in der Produktion, um ein API-Token zu erhalten, das Sie als Alternative zu jquery erkunden könnten.
https://github.com/github/fetch

@usopan vielen Dank, ich werde es mir ansehen

@HakamFostok
Der einfachste Weg, diesen Fehler zu umgehen, ist die Verwendung von QS. Sie müssen qs nicht installieren, verwenden Sie es einfach direkt mit qs.stringify

let qs = require('qs');
let result = await axios.post(url,
    qs.stringify({
        refresh_token: refresh_token,
        grant_type: 'refresh_token'
    }),
    {
        headers: {
            "Content-Type": "application/json"
        },
        auth: {
            username: 'username',
            password: 'secret'
        }
    });

Damit kannst du Axios verwenden, was mit ES6 viel besser ist ;)

Aber du hast vollkommen recht. Dieser Fehler hätte schon vor Ewigkeiten behoben werden sollen. Keine Ahnung, warum sie so lange brauchen.

@HakamFostok @Silve2611 Ich bestätige, dass die qs-Problemumgehung funktioniert, ich verwende sie, um hier Token zu erhalten: https://github.com/Halceyon/aspnet-auth/blob/master/src/AspnetAuth.js

Ja, die Umgehung von 'qs' funktioniert, ABER das Problem ist, dass ich 'qs' nicht im Projekt verwende. trotzdem danke für die Hilfe, am Ende habe ich diese Bibliothek geworfen und die Ajax-Bibliothek https://github.com/fdaciuk/ajax verwendet, es ist viel besser, und ich ermutige alle, diese Bibliothek loszuwerden und dorthin zu migrieren.

qs wird fast 60 Millionen Mal im Monat heruntergeladen, es ist 4,8 KB gzippt.
Express, Body-Parser, Request, Superagent und viele andere hängen davon ab, Sie können es ohne Angst zu Ihrem Projekt hinzufügen.

@HakamFostok Soweit ich weiß, ist es Teil des Kernmoduls, sodass Sie es nicht manuell installieren müssen, wenn Ihre Knotenversion auf dem neuesten Stand ist.

Ich möchte einfach keine Bibliothek installieren, die ich nicht brauche, nur um einen Workaround für ein Problem zu schaffen, das vor vielen Jahren gelöst werden sollte. Nur zu Ihrer Information: Mein Projekt ist weder React-Projekt noch verwende ich Knoten, ich verwende ASP.NET MVC mit vue.js

Das Modul "querystring" ist eingebaut, und soweit ich weiß, macht es dasselbe.

@axios Was ist mit diesem Fehler, der weiterhin besteht?

@HakamFostok Ich benutze auch vue und es funktioniert wirklich perfekt mit Axios. Erwägen Sie die Verwendung von qs, da Axios viele Vorteile hat, wenn Sie async await verwenden möchten.

Das Problem ist immer noch aufgetreten und ich muss qs wie folgt manuell verwenden

axios.post(
      "connect/token",
      qs.stringify({
        username: this.state.username,
        password: this.state.password,
        grant_type: "password",
        scope: "offline_access"
      })
    );

Ist das wirklich überhaupt ein Bug? Ich mache URL-Codierung in zwei verschiedenen Projekten mit Axios, und es funktioniert einwandfrei. Der Kommentar, den ich zuvor hier gepostet habe, ist das einzige, was ich eingestellt habe, und es funktioniert.

Natürlich ist es ein Bug! Es funktioniert nicht wie in der Doku beschrieben. Es macht auch keinen Sinn, den zusätzlichen Schritt für etwas hinzuzufügen, das eindeutig von Axios gehandhabt werden sollte. Andere Verfahren benötigen diesen Schritt nicht.

Ja, es macht keinen Sinn, wenn Sie einen Additionsschritt hinzufügen müssen.
Wenn ich posten möchte

headers: {
     'Content-type': 'application/x-www-form-urlencoded'
}

Ich muss so schreiben

axios.post(
      "connect/token",
      qs.stringify({
        username: this.state.username,
        password: this.state.password,
        grant_type: "password",
        scope: "offline_access"
      })
    );

Ich hatte das gleiche Problem mit dem Setzen Content-Type auf application/vnd.api+json , ähnlich wie bei #340, das leider ohne Lösung geschlossen wurde.

Meine Problemumgehung bestand darin, die Objektdaten zu stringifizieren, um die Content-Type zu senden, was ein bisschen hackig ist, da wir uns mit der axiosen Art der Einstellung von application/json;charset=utf-8 befassen müssten, wenn es sich um eine handelt Objektdaten.

Ich hoffe, wir hätten mehr Möglichkeiten, die Content-Type manuell einzustellen, anstatt sie von Axios für uns "raten" zu lassen.

Es sollte es für uns „raten“ oder einen Fehler werfen, den wir behandeln können. Im Moment sieht alles gut aus, aber die Parans stimmen offensichtlich nicht. Ein Anfänger, der mit Axios arbeitet, wird einen solchen Fehler nicht finden können. Zumindest sollte es korrekt dokumentiert werden.

+1 Habe gerade 2 Stunden damit verbracht, dieses Problem zu verfolgen. Hätte zumindest eine bessere Erklärung / Anmerkung in der Readme geschätzt. Wird aktualisiert, wenn qs das Problem löst.

UPDATE: Mit React hat qs für mich funktioniert. Das war meine Lösung. Ich brauchte in meinem Fall sowohl Formularparameter als auch einen Abfrageparameter.

var data = qs.stringify({
    id: 'MY_ID',
    action: 'MY_DATA'
});
var params = {
  params: {
    token: 'MY_TOKEN'
  }
};
axios.post('MY_URL', data, params)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

Ich musste Axios mit React verwenden, um einen Anmeldeprozess durchzuführen, und nachdem ich stundenlang mit diesem Problem gekämpft hatte, bestand die Lösung darin, die für die Anforderung erforderlichen Objekte unabhängig zu erstellen.

Der Fehler war: unsupported_grant_type

Diese Arbeit.

import axios from 'axios';
import qs from 'qs' ;

const endPoint = `${endPointApi}/ControllerX`;  

const data = qs.stringify({ 
    grant_type: 'password',            
    user: userName, 
    password: userPass
});

const headers = {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};

axios.post(endPoint, data, headers)
.then(function (response) {
    debugger;
    console.log(response);
})
.catch(function (error) {
    debugger;
    console.log(error);
});

Dieser andere Weg funktioniert nicht.

axios.post({
    url: endPoint, 
    data: data, 
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})...

@harvic3 Sie können meinen Arbeitscode überprüfen. Außerdem brauchen Sie keinen bestimmten Header.

https://github.com/Awesome-CMS-Core/Awesome-CMS-Core/blob/master/src/AwesomeCMSCore/AwesomeCMSCore/React/js/App/Modules/Account/LoginForm.jsx#L40-L79

Nach 2 Jahren ist dieser Fehler immer noch nicht behoben

+1

+1

+1 gibt es immer noch das Problem

+1

+1
ping @mzabriskie @nickuraltsev

Das Problem auf der nodejs-Seite ist, dass eine der Abhängigkeiten, follow-redirects , den Content-Type-Header löscht:

https://github.com/olalonde/follow-redirects/blob/1b6340f83ad5596a0a38c16a7113692bd90301f2/index.js#L188 -L192

+1 stößt hier definitiv auf das gleiche Problem

+1

Beheben Sie dies endlich, um keine Hacks als qs zu verwenden (aber ja, qs funktioniert)

Hej

1. Mai 2018 23.31 Uhr „Leonid Ershov“ [email protected] :

beheben Sie dies endlich, um keine Hacks als qs zu verwenden

—
Sie erhalten dies, weil Sie diesen Thread abonniert haben.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/axios/axios/issues/362#issuecomment-390337824 oder stumm
der Faden
https://github.com/notifications/unsubscribe-auth/AJZ-B0lPoCseiT4WNhJFlHVUTBHbmo9Yks5tzz3FgaJpZM4JAIfw
.

Anscheinend wird dieses Problem nicht behoben

Es fängt an lächerlich zu werden!

Nicht einmal ein "f**k you, wir werden das nie reparieren!" :/

+1

+1

Es scheint, dass ein Held es behoben und eine bestimmte Version "aaxios" erstellt hat
Einstellung des Inhaltstyps zulassen
Habe es aber nicht getestet, ging weiter zum Abrufen

+1

+1

+1

+1

👍
wie @camposjorge sagte, könnten wir dank https://github.com/axios/axios/pull/1544 (bald?) eine Lösung sehen

keine Reparatur?

+1

Ich habe es gelöst! Es ist kein Axios-Problem, sondern nur ein Kreuzursprung

set { headers: {'Content-Type': 'application/x-www-form-urlencoded; Zeichensatz=UTF-8'}}
und
Verwenden Sie einfach transformRequest aus den Axios-Optionen

transformRequest: [Funktion (Daten) { Rückgabeformat (Daten) }],

Formatfunktion zum Parsen von {a:"a",b:"b"} in "a=a&b=b"

+1, und keine der oben genannten Lösungen hat funktioniert

+1

Scheint so, als ob viele Leute immer noch auf eine Lösung für dieses Problem warten, mich eingeschlossen - sicherlich muss es nach all dieser Zeit einen Lösungsvorschlag dafür geben.

Dieses Problem wurde mit qs.stringify in React behoben.

Sie müssen die Daten nur qs.stringifizieren, bevor Sie sie an axios.post übergeben

Das Problem ist, dass das CSRF-Token standardmäßig als gemeinsamer Header bei Axios registriert ist
um dieses Problem zu lösen

1- Ersetzen Sie diese Zeilen in bootstrap.js "

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

let token = document.head.querySelector('meta[name="csrf-token"]');

wenn (Token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} anders {
console.error('CSRF-Token nicht gefunden: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
"
mit dieser Zeile "
window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
"
2- Installieren Sie das qs -Modul von npm , klicken Sie hier

3- definiere const von qs wie unten:
const qs = require('qs');
4- Verwenden Sie Axios standardmäßig wie folgt:
axios.post('Dein Link hier',qs.stringify({
'a1': 'b1',
'a2':'b2'
}))
.then(Antwort => {

                     alert('ok');

                })
                .catch(error => alert(error));

Damit konnte ich ein Formular mit Axios einreichen, unabhängig davon, dass der Inhaltstyp auf Axios nicht geändert werden kann

```
const { vollständiger Name, E-Mail, Passwort, Telefon} = this.state;
Axios (URL, {
Methode: "POST",
Überschriften: {
Akzeptieren: "application/json",
"Content-Type": "application/x-www-form-urlencoded"
},
Daten: this.serialize({
Name: vollständiger Name,
Email Email,
Passwort: Passwort,
Telefon: Telefon
})
})
.then(Antwort => {
console.log (Antwort);
})
.catch(Fehler => {
Konsole.log (Fehler.Antwort);
});

serialisieren = obj => {
lassen Sie str = [];
for (lass p in obj)
if (obj.hasOwnProperty(p)) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
};

Stoßen. Lächerlicherweise ist dieser lästige Fehler nach Jahren immer noch nicht behoben.

Stoßen. Gleiches Problem hier, Fix erforderlich af.

@mzabriskie

Sollte dies nicht als behoben geschlossen werden?
Getestet mit entsprechenden Headern und sie werden in der Anfrage richtig gesetzt.
Header auf Anfrage
Header hier setzen

Die form-urlencoded- Bibliothek hilft mir, das zu beheben (vorübergehend).

return preset.post("/app/BookingProc.do",formurlencoded(dat),{
        headers:{
            Cookie:session
        }
    }).then(response=>{
        return response
    })

@mzabriskie

Sollte dies nicht als behoben geschlossen werden?
Getestet mit entsprechenden Headern und sie werden in der Anfrage richtig gesetzt.
Header auf Anfrage
Header hier setzen

nein das kann nicht geschlossen werden!!!
Jeder stößt auf das Problem und weiß nicht, wo die Lösung zu finden ist. Es sollte ohne das Setzen von Headern funktionieren oder es sollte ein Standard-Header gesetzt werden.
Wenn nicht, sollte ein Fehler ausgegeben werden, der zeigt, wo das Problem liegt.
Auch die Dokumentation muss aktualisiert werden.

Es ist immer noch kaputt!

Stoßen. Dieser Fehler ist immer noch an seinem Platz und fühlt sich großartig an!

stoßen

Dieser Fehler lebt noch!

Ich erlebe diesen Fehler hier auch.

immer noch ekelhaft hier

const axios = require('axios');
const qs = require('querystring');

axios.post(`${this.api}siteverify`, qs.stringify({
  secret: this.secret,
  response: recaptchaToken,
  remoteip: userIP,
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
});

Das funktioniert für mich. Ich habe es von der App abgerissen, die ich gerade entwickle, dieser Teil dient der Überprüfung von Googles Recaptcha.

Habe immer noch das gleiche Problem...

Standardeinstellung funktioniert nicht:
axios.defaults.headers.common['Accept'] = 'application/json'; // working axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'; // NOT working

Und auch das Einstellen der Anfrage funktioniert nicht:
axios.get(url, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } })

@aaroninn , das scheint nicht das gleiche Problem zu sein, bitte öffnen Sie ein neues Problem, wenn Sie glauben, dass Ihr Problem mit axios zusammenhängt (was eher mit einer grundlegenden Verwendung von vuex zu zusammenhängen scheint ich, aber ich bin mir nicht sicher)

Dieser Thread ist bereits voll von +1 , keine Notwendigkeit, hier andere Probleme zu sammeln

https://github.com/axios/axios/issues/362#issuecomment -229817415

@mzabriskie es scheint, dass Sie der Autor des Commit sind, das dieses Problem eingeführt hat, können Sie nichts dagegen tun (wenn Sie nicht einmal verstehen, warum Sie es überhaupt getan haben, könnten/sollten Sie es rückgängig machen, rechts?)

Danke im Voraus

Es ist 2018! Welche Antwort oben sollte ich nicht ablehnen?

Sagen Sie mir noch einmal, warum wir alle Axios lieben?

Dieses Problem muss behoben werden? Oder es ist freiwillig, frage ich, es ist seit 2 Jahren geöffnet, aber niemand hat es repariert. Ist es freiwillig und muss nicht behoben werden?

@jeremycare Ich erstelle gerade eine PR für dieses Problem ... Ich denke, es ist ein wirklich ärgerlicher "Fehler" und sollte behoben werden. Vor allem ist es wirklich einfach, dies zu beheben und dieses Problem zu beseitigen.

Leute, ich glaube, ich verstehe, warum dieses Ticket noch offen ist.
Leute, die sagen, dass es für sie funktioniert, verwenden jetzt das Modul "qs", diejenigen, die sagen, dass es nicht funktioniert, verwenden das Modul "querystring".
Ich sehe auch, dass Leute Probleme mit Kopfzeilen haben, dieses Ticket ist so lange, um alles zu lesen, und vielleicht verstehe ich nicht alles über das Problem in diesem Ticket, aber wenn jemand keine Anfragen mit Formulardaten stellen kann, überprüfen Sie dies, bevor Sie andere Dinge versuchen:

Hier alles beschrieben: https://github.com/axios/axios/issues/1894

Es ist enttäuschend zu sehen, dass ein Austausch von nativem fetch in Browsern sofort mit der Einstellung von Content-Type funktioniert, wenn Axios es nicht setzt. Interop zwischen Plattformen war für mich das größte Verkaufsargument.

Ich kann in der Methode transformRequest sehen, dass der Header gesetzt ist, aber er schafft es nie zur eigentlichen Anfrage. Ich kann das qs-Modul nicht verwenden, da ich nur einen Textkörper sende.

Um das, was ich erlebe, neu zu formulieren: Ich kann einen Content-Type -Header im Browser nicht mit Axios setzen, da er überschrieben wird. Ich sende eine Zeichenfolgennutzlast (keine Formulardaten), daher sind die Module qs / querystring für meinen Fall nicht relevant.

Was können wir tun, um dies zu beheben?

EDIT: Im Moment werde ich nur fetch verwenden, wenn ich mich im Browser befinde, aber diese Art negiert den ganzen Punkt, Axios für mich zu verwenden.

EDIT2: Ich habe meine eigene Bibliothek erstellt - Cowl - um meine Anfragen in mehreren Umgebungen zu verarbeiten (Targeting Node/Browser/React-Native). Es ist keineswegs ein Ersatz für Axios und seine Fülle an Funktionen, aber es unterstützt alle Grundlagen.

Habe das gleiche Problem. Und wenn ich den Schlüssel auf irgendetwas anderes setze, funktioniert es, außer auf "Content-Type"! Bitte helfen Sie!

Ich musste tatsächlich noch eine weitere chaotische Hybrid-App erstellen, indem ich fetch in Browsern und Axios in Node und in React-Native verwendet habe. Komisch, dass es so ist und nicht umgekehrt. Ich hoffe wirklich, dass dies bald in Angriff genommen wird, damit ich meinen Affenfleck entfernen kann.

Ich denke, es ist wichtig zu erkennen, dass dies definitiv nicht nur ein Problem mit querystring ist. Mein Body-Inhalt ist nur Rohtext ohne Parameter, aber ich kann ihn nicht mit Axios mit einem Content-Type senden.

Ich habe versucht, post zu verwenden, es funktioniert gut, der Standardwert von post ist json

Ich erlebe diesen Fehler gerade ... also gibt es dafür nach Jahren keine Lösung? Beeindruckend...

Ich habe vor über zwei Monaten eine PR erstellt, die das Problem beheben würde ... Ich verstehe nicht, warum es nicht zusammengeführt wird?!

Ich habe vor über zwei Monaten eine PR erstellt, die das Problem beheben würde ... Ich verstehe nicht, warum es nicht zusammengeführt wird?!

Denken Sie daran, dass seit September letzten Jahres niemand etwas gepusht hat, vielleicht suchen sie nach Betreuern?. Außerdem glaube ich, dass Sie einen Test verpasst haben, als ich Ihre PR vergleiche mit: https://github.com/axios/axios/pull/1544/files

@mzabriskie könnten Sie vielleicht die Verantwortung übernehmen, eine dieser PRs zusammenzuführen? Da derzeit einige Software erfordert, dass Abrufanforderungen einen Inhaltstypsatz haben (RoR-Parameter zum Beispiel: https://guides.rubyonrails.org/api_app.html#using-actiondispatch-request). Die in https://github.com/axios/axios/issues/362#issuecomment -229817415 angegebene Lösung scheint der richtige Weg zu sein und würde vor allem all die verzweifelten Hacks wie die Verwendung von Fetch für diesen speziellen Anwendungsfall lösen.

Ich bin zu got pagkage gewechselt, da axios aufgegeben zu sein scheint.

Axios kann also offiziell keine Anfragen mit 'Content-Type' senden: 'application/x-www-form-urlencoded' oder funktioniert die @ChBernat -Lösung tatsächlich?

Gibt es eine Problemumgehung für dieses Problem atm?

Gibt es eine Problemumgehung für dieses Problem atm?

Suchen Sie ein Jahr hier oben nach und Sie werden viele Problemumgehungen sehen ... Obwohl ich, wie andere und mich selbst eingeschlossen, empfehlen würde, von Axios fortzufahren. Es ist verlassen...

Wow ... sie sollten das Projekt an diesem Punkt einfach aufgeben, ich weiß, dass ich es bin. Fast 3 Jahre, seit das Problem ursprünglich gemeldet wurde, und jetzt versuchen wir immer noch, dieses Problem zu lösen? Nicht zu glauben. Ich liebe Open Source, also hege ich keine bösen Gefühle für dieses Projekt, ich habe keine Betreuer, aber ... es wird von TONNEN Menschen verwendet, also ist das Mindeste, was Sie tun könnten, es aufzugeben, damit wir alle wissen, dass dieses Projekt tot ist. Danke.

@justintime4tea Hast du eine neue Empfehlung?

got

@kslr got or request scheint das zu sein, was alle anderen auch mit der Migration begonnen haben. Ich versuche, bei Axios zu bleiben, aber ich denke, es wird nur darauf hinauslaufen, dass ich eine Abstraktionsschicht darüber schreibe, damit ich die zugrunde liegende HTTP-Anforderungsbibliothek austauschen kann, und wenn ich dann eine andere Bibliothek verwende, die eine "build -in" HTTP-Client, den er verwendet, lassen Sie ihn einfach sein Ding machen.

Ich habe so etwas ausprobiert und für mich gearbeitet.
Vielleicht nicht die beste Lösung, aber es kann wirklich helfen (glaube ich), jeder Vorschlag, wenn diese Lösung schrecklich ist, ist willkommen.

const foo= yield qs.stringify({ 'grant_type' : 'yourGrantType', 'param' : param, 'param' : param }) const bar= yield axios.post('/baz', foo)

Ich habe den Header entfernt, und es scheint, als wäre er gut angekommen.

axios({
  url,
  method: 'POST',
  headers:{
    'Content-Type': 'application/json'
  },
  data: null, // important
})

Ich hatte zwei Probleme mit RoR als Backend.

Mein Kontext:

Ich hatte ein Projekt mit veraltetem vue-resource und alles funktioniert ohne zusätzliche Konfiguration. Und jetzt organisiere ich die Abhängigkeiten des Projekts und ersetze veraltete Abhängigkeiten, also habe ich vue-resource durch axios ersetzt ;)...

Aber wir hatten einige Probleme und im Folgenden werde ich mitteilen, was ich tue, um diese Probleme zu lösen. Vielleicht hilft jemand! Es tut mir leid, wenn ich Ihnen nicht wie erwartet geholfen habe

Erstes Problem , das Problem ist das gleiche wie dieses Problem, ich habe es gelöst mit:

axios.interceptors.request.use(config => {
  config.paramsSerializer = params => qs.stringify(params);
  return config;
});

Nun, Parameter wie:

q: {
  search: "Something",
  sort: "asc",
}

wird umgewandelt in:
http://xxxx/?q%5Bsearch%5D=something&q%5Bsort%5D=asc

Dies wird analysiert:

q[search]: something
q[sort]: asc

Zweites Problem : RoR gibt eine HTML-Antwort anstelle einer JSON-Antwort zurück:

Dieses Problem tritt auf, weil unser Back-End AJAX-Anforderungen von anderen Arten von Anforderungen unterscheiden muss.

Standardmäßig hat vue-resource $ den Header X-Requested-With bereits wie erwartet gesetzt. Aber Axios nicht. Also musste ich diesen Schlüssel im Anforderungsheader definieren. Meine globale Axios-Konfiguration war am Ende wie folgt:

axios.interceptors.request.use(config => {
  config.paramsSerializer = params => qs.stringify(params);
  return config;
});
axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

===

Wenn Sie Rails als Backend verwenden und keine der Lösungen für Sie funktioniert hat, lassen Sie es mich wissen, vielleicht kann ich Ihnen helfen =).

Verwenden Sie dies

Ich arbeite an React-Native und erhalte einen Bad Request 400-Fehler, wenn ich Folgendes verwende:
import * as qs from 'querystring';
axios.post(url,qs.stringify({
'Vorname': 'tief',
'Nachname': 'Palotra',
}), {
Überschriften: {
'Content-Type': 'application/x-www-form-urlencoded; Zeichensatz=UTF-8'
}
}).dann((Antwort)=>{
console.log('funktioniert')
}).catch((Fehler)=>{
console.log('Fehler')
Konsole.log (Fehler)
})

also, wie kann man dieses problem lösen?

irgendeine Lösungsmöglichkeit :(

Gelöst von qs

{ data: qs.stringify(bodyObject) }

Traurig zu sehen, dass so viele Menschen in dieser Frage verwirrt sind. Ich habe mein Bestes versucht, diese Kommentare zu lesen. Aber es scheint viele andere Probleme gegeben zu haben.

Verzeihen Sie mir, dass ich es schließe. Wenn jemand ein neues Problem eröffnen kann, um das Problem klar zu beschreiben, ist das wirklich ein großes Dankeschön an Sie.

Hallo alle miteinander,

Ich dachte, ich würde mich einmischen, da ich fast einen ganzen Arbeitstag meines Lebens damit verschwendet habe, dieses Problem zu lösen. Dies kann einigen teilweise oder vollständig helfen, also hoffen wir, dass dies nützlich ist.

Meine Antwort ergibt sich aus verschiedenen Gründen, warum ein POST mit Axios fehlgeschlagen ist, von:

1. 400 Ungültige Anfrage
2. Kann nicht mit benutzerdefinierten Headern posten (wie dieser Thread)
3. Die Daten/Nutzdaten müssen serialisiert/stringifiziert werden

Ich hatte das gleiche Problem wie alle in diesem Thread mit dem Bad Request 400, als ich benutzerdefinierte Header in der Konfiguration wie folgt an Axios übergab, und habe viele der Antworten hier ausprobiert, z. B. die Verwendung von qs.stringify(), das Festlegen von Daten in der Konfiguration auf null oder {} ohne Erfolg.

1) Hinweis - Das Hinzufügen des .catch()-Blocks und das Protokollieren des Fehlers wie so hat mir wirklich geholfen, weil ich in der Lage war, einen Fehler aufzudecken, der nicht so kryptisch war. Ich konnte die Nachricht zum Debuggen verwenden und letztendlich das Problem herausfinden, das ich hatte.

2) Es ist wichtig, im .then() -Block response.data zurückzugeben, da Sie sonst auf diesen Fehler stoßen:

Converting circular structure to JSON

Jetzt war mein Problem, dass der API-POST-Body nicht das war, was der Endpunkt wollte, aber ich konnte es nicht sehen, bis ich den Fehler protokollieren konnte.

Außerdem verwende ich auch NestJS und den HttpService, der ein Wrapper um Axios ist, und das hat das Problem weiter verkompliziert, weil der eigentliche Fehler nicht im catchError-Callback in meiner Pipe aufgetaucht ist.

Hier ist also die Lösung für reines Axios und NestJS.

Axios:

const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
return axios.post('https://some-made-up-endpoint, dataString, { headers })
.then(resp => resp.data)
.catch(error => {
this.logger.log('ERROR: ${JSON.stringify(error.response.data)}');
});

NestJS:

const headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
return this.http.post('https://some-made-up-endpoint, dataString, { headers }).pipe(
map(response => response.data), // This is important otherwise - circular JSON error
catchError((error: any) => {
this.logger.error('[[[[ ERROR TRYING TO FETCH TOKEN: ${error.message} ]]]]');
return of()
})
).toPromise();

TLDR;

1) Fügen Sie den .catch()-Block hinzu, um den eigentlichen Fehler richtig zu protokollieren, andernfalls ist es 400 Bad Request
2) Stellen Sie sicher, dass Ihre Datensignatur mit den Erwartungen der API übereinstimmt. Dies ist einer der Gründe, warum ein Fehler vorliegt, da ein Code 400 eine „Bad Request“ ist.
3) Geben Sie response.data im Block .then() zurück, wenn Sie Axios verwenden, oder in einem Kartenoperator, wenn Sie NestJS verwenden, oder Sie erhalten den Fehler Converting circular JSON

Sorry für den langen Post und allen viel Glück!

Prost

Ich arbeite an React-Native und erhalte einen Bad Request 400-Fehler, wenn ich Folgendes verwende:
import * as qs from 'querystring';
axios.post(url,qs.stringify({
'Vorname': 'tief',
'Nachname': 'Palotra',
}), {
Überschriften: {
'Content-Type': 'application/x-www-form-urlencoded; Zeichensatz=UTF-8'
}
}).dann((Antwort)=>{
console.log('funktioniert')
}).catch((Fehler)=>{
console.log('Fehler')
Konsole.log (Fehler)
})

diese Arbeit für mich. mit Abfrage stringfy vielen Dank.
Du rettest mein Leben

Sie können stattdessen eine Bibliothek wie qs verwenden:

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

Ihre Lösung funktioniert. Vielen Dank!