Axios: Hinzufügen von Headern zur Methode axios.post

Dies ist kein Fehler, es funktioniert wie erwartet.
Sie generieren eine Preflight-Anfrage (keine einfache), wie in den Dokumenten https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS angegeben, weil Sie einen Header und einen Inhaltstyp hinzufügen, der erzwingt dies.
In diesem Modus wird also eine OPTIONS-Anforderung vor Ihrer Hauptanforderung ausgegeben. Sie müssen sicherstellen, dass der Server die OPTIONS-Anforderung verwalten kann, damit sie funktioniert.

Bearbeiten: Ich musste Autorisierung zu zulässigen Headern in meinem CORS-Filter hinzufügen

@jffernandez

Ich habe das gleiche Problem. Wenn ich den Auth-Header weglasse, erhalte ich eine Optionsanforderung, die POST, OPTIONS und dann den POST zurückgibt, der einen 403 zurückgibt, weil der Authorization-Header fehlt (erwartet).

Wenn ich den Header hinzufüge, bekomme ich nur die Optionsanfrage und es macht nie den POST.

post("http://localhost:8080/foo", foo)

vs

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

Es ist ein CORS-Problem, nicht in Axios. Bitte werfen Sie einen Blick auf den bereitgestellten Link @jffernandez oder suchen Sie hier nach ähnlichen Problemen.

Ja, es geht um CORS. Aber wenn Sie wie ich sind, haben Sie wahrscheinlich vergessen, den auf Ihrem API-Server autorisierten Inhaltstyp hinzuzufügen.

AllowedHeaders : Content-Type und X-Requested-With
Und Genehmigung in Ihrem Fall.

Und vergessen Sie natürlich nicht, auch die Methode OPTIONS zuzulassen.

axios({ method: 'POST', url: 'you http api here', headers: {autorizacion: localStorage.token}, data: { user: 'name' } })

Oder wenn Sie diesen CORS-Fehler beheben möchten, können Sie das Corsproxy-Paket in Ihrem Knoten installieren. Dies hilft Ihnen bei ursprungsübergreifenden Fehlern. Sie können auf den folgenden Link verweisen:

https://github.com/gr2m/CORS-Proxy

````
Anmelden = () => {
console.log('Anmeldung angeklickt')
let data = JSON.stringify({
Passwort: this.state.password,
Benutzername: this.state.email
})

axios.post('url', data, {
    headers: {
        'Content-Type': 'application/json',
    }
}
)

}
```

Lösen Sie es, indem Sie diesen Header hinzufügen

   axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });

So musste ich meine POST-Anfrage formatieren

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

Um den Cors-Fehler zu beheben, führen Sie einfach diesen Befehl npm i --save cors aus und importieren Sie ihn dann wie folgt in Ihre app.js

var cors = require('cors');
Rufen Sie dann so in derselben Datei auf, in meinem Fall ist meine Stammdatei app.js
app.use(cors());

Es wird Ihr Cors-Problem lösen

@mirzaumersaleem Ich verwende die Cors nicht, aber ich versuche, mit Axios an mein Backend zu posten, und ich erhalte eine 400 Bad-Anfrage

fetch kann mit cors (das Backend ist kein Problem), aber mit Axios manchmal fehlgeschlagen.

Um den Cors-Fehler zu beheben, führen Sie einfach diesen Befehl npm i --save cors aus und importieren Sie ihn dann wie folgt in Ihre app.js

var cors = require('cors');
Rufen Sie dann so in derselben Datei auf, in meinem Fall ist meine Stammdatei app.js
app.use(cors());

Es wird Ihr Cors-Problem lösen

Auf meinen Reisen muss CORS auf dem Server ausgeführt werden ( .net /java/node/php etc..)

Bearbeiten: Ich musste Autorisierung zu zulässigen Headern in meinem CORS-Filter hinzufügen

@jffernandez

Ich habe das gleiche Problem. Wenn ich den Auth-Header weglasse, erhalte ich eine Optionsanforderung, die POST, OPTIONS und dann den POST zurückgibt, der einen 403 zurückgibt, weil der Authorization-Header fehlt (erwartet).

Wenn ich den Header hinzufüge, bekomme ich nur die Optionsanfrage und es macht nie den POST.

post("http://localhost:8080/foo", foo)

vs

post("http://localhost:8080/foo", foo, {
    headers: { Authorization: "Bearer " + token }
})

Die schnelle Antwort ist, dass das erste Argument nach der URL und das zweite oft falsch platziert sind, dh axios (url, data, config). Wenn Sie also den Konfigurationsteil weglassen oder Daten und Konfiguration wechseln, erhalten Sie wahrscheinlich unerwartete Ergebnisse, im Allgemeinen sollte die Arbeit mit localhost sein ganz ohne Probleme.

Im Allgemeinen ist es nicht sehr lesbar

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

Ich habe erwartet, dass alle APIs konsistent sind und haben
1) URL als erster Parameter,
2) config als zweiter Parameter (optional),
3) Daten (optional)

denn das ist es, was Benutzer erwarten, trotzdem hat Axios aus dieser kleinen winzigen API-Entscheidung ein riesiges Problem gemacht, so dass fast jeder mindestens einmal im Leben dort gefangen ist.

Hat bei mir funktioniert:

`
Konstante Header = {
'Inhaltstyp': 'application/json',
'Autorisierung': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), Daten, {
Überschriften: Überschriften
})
.dann((Antwort) => {
versenden({
Typ: FOUND_USER,
daten: antwort.daten[0]
})
})
.catch((Fehler) => {
versenden({
Typ: ERROR_FINDING_USER
})
})
`

Angesichts des gleichen Problems hier mit jquery ist die Anforderung erfolgreich, aber wenn ich die Anforderung mit Axios sende, wird ein Cors-Problem angezeigt.
Meine Anfrage--

      .post('https://test.pi.com/j_spring_security_check', {

        withCredentials: true,
        crossorigin: true,
        headers: {
          common:{
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'WithCredentials': true,
            'Access-Control-Allow-Origin': '*'
        }
      },
        data: JSON.stringify({
          j_username: email,
          j_password: password
        }),

        // proxy: {
        //   '/j_spring_security_check/*': 'https://devtest.pvai.com/j_spring_security_check',
        // }
      })

Dies sind die Antwortheader vom Server und mein Locahost-Ursprung ist erlaubt. Die Header, die ich sende, sind erlaubt und Methoden auch.

access-control-allow-credentials: true
access-control-allow-headers: Authorization, X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept
access-control-allow-methods: POST, GET, OPTIONS
access-control-allow-origin: http://localhost:5000
access-control-expose-headers: Authorization
cache-control: no-cache, no-store, max-age=0, must-revalidate
content-length: 0
date: Wed, 11 Dec 2019 04:53:25 GMT
expires: 0
location: /authFailure
pragma: no-cache
status: 302
strict-transport-security: max-age=31536000 ; includeSubDomains
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block

So musste ich meine POST-Anfrage formatieren

    var postData = {
      email: "[email protected]",
      password: "password"
    };

    let axiosConfig = {
      headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          "Access-Control-Allow-Origin": "*",
      }
    };

    axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
    .then((res) => {
      console.log("RESPONSE RECEIVED: ", res);
    })
    .catch((err) => {
      console.log("AXIOS ERROR: ", err);
    })

Danke, hat meinen Tag gerettet! Hat für mich funktioniert