Übergeben von Headern mit POST-Anforderung von axios

133

Ich habe eine Axios-POST-Anfrage geschrieben, wie in der Dokumentation zum npm-Paket empfohlen:

var data = {
    'key1': 'val1',
    'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data)       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

Und es funktioniert, aber jetzt habe ich meine Backend-API so geändert, dass sie Header akzeptiert.

Inhaltstyp: 'application / json'

Autorisierung: 'JWT fefege ...'

Nun, diese Anfrage funktioniert gut bei Postman, aber wenn ich einen Axios-Anruf schreibe, folge ich diesem Link und kann ihn nicht ganz zum Laufen bringen.

Ich bekomme ständig 400 BAD RequestFehler.

Hier ist meine geänderte Anfrage:

axios.post(Helper.getUserAPI(), {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    },
    data
})      
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

Jede Hilfe wird sehr geschätzt.

Jagrati
quelle

Antworten:

240

Geben Sie bei Verwendung von Axios ein Objekt an, das die Header als letztes Argument enthält, um benutzerdefinierte Header zu übergeben

Ändern Sie Ihre Axios-Anfrage wie folgt:

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
    headers: headers
  })
  .then((response) => {
    dispatch({
      type: FOUND_USER,
      data: response.data[0]
    })
  })
  .catch((error) => {
    dispatch({
      type: ERROR_FINDING_USER
    })
  })
Shubham Khatri
quelle
@ KishoreJethava, 500 ist interner Serverfehler, können Sie auf der Serverseite überprüfen, ob Header kommen oder gibt es einen anderen Fehler
Shubham Khatri
@ KishoreJethava, können Sie einfach die Header in Ihrem Server protokollieren und sehen, ob Sie die richtigen Werte erhalten
Shubham Khatri
Müssen Sie keine Daten veröffentlichen? Stellen Sie außerdem sicher, dass this.state.token einen Wert enthält
Shubham Khatri
Lassen Sie uns diese Diskussion im Chat fortsetzen .
Kishore Jethava
@ShubhamKhatri, darf ich Sie bitten, sich axioshier eine verwandte Frage anzusehen : stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed
37

Hier ist ein vollständiges Beispiel für eine axios.post-Anforderung mit benutzerdefinierten Headern

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

Matthew Rideout
quelle
mit diesem Problem konfrontiert, um eine Anfrage zu erhalten. Die Antwort kommt im XML-Format. Dies löst das Problem nicht.
Eswar
3

Dies könnte hilfreich sein,

const data = {
  email: "[email protected]",
  username: "me"
};

const options = {
  headers: {
      'Content-Type': 'application/json',
  }
};

axios.post('http://path', data, options)
 .then((res) => {
   console.log("RESPONSE ==== : ", res);
 })
 .catch((err) => {
   console.log("ERROR: ====", err);
 })
Hinweis: Alle Statuscodes über 400 werden im Axios-Fangblock abgefangen. Außerdem sind Header für die Post-Methode in Axios optional

Blockquote

Blockquote

Fahd Jamy
quelle
2

Shubham Antwort hat bei mir nicht funktioniert.

Wenn Sie die Axios-Bibliothek verwenden und benutzerdefinierte Header übergeben möchten, müssen Sie Header als Objekt mit dem Schlüsselnamen "Header" erstellen. Der Header-Schlüssel sollte ein Objekt enthalten, hier ist es Inhaltstyp und Autorisierung.

Das folgende Beispiel funktioniert einwandfrei.

    var headers = {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...' 
    }
    axios.post(Helper.getUserAPI(), data, {"headers" : headers})

        .then((response) => {
            dispatch({type: FOUND_USER, data: response.data[0]})
        })
        .catch((error) => {
            dispatch({type: ERROR_FINDING_USER})
        })
Hemadri Dasari
quelle
1

Sie können auch Interceptors verwenden, um die Header zu übergeben

Es kann Ihnen viel Code sparen

axios.interceptors.request.use(config => {
  if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

  const accessToken = AuthService.getAccessToken();
  if (accessToken) config.headers.Authorization = 'Bearer ' + accessToken;

  return config;
});
Israel kusayev
quelle
Ich würde vorschlagen,config.method.toUpperCase()
Constantine
@Constantine Ich denke, es ist bereits Großbuchstaben
Israel kusayev
Leider war meine niedriger
Constantine
0

Wenn Sie eine Eigenschaft aus dem vuejs-Prototyp verwenden, die bei der Erstellung nicht gelesen werden kann, können Sie auch Header definieren und schreiben, z

storePropertyMaxSpeed(){
                axios.post('api/property', {
                    "property_name" : 'max_speed',
                    "property_amount" : this.newPropertyMaxSpeed
                    },
                    {headers :  {'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + this.$gate.token()}})
                  .then(() => { //this below peace of code isn't important 
                    Event.$emit('dbPropertyChanged');

                    $('#addPropertyMaxSpeedModal').modal('hide');

                    Swal.fire({
                        position: 'center',
                        type: 'success',
                        title: 'Nova brzina unešena u bazu',
                        showConfirmButton: false,
                        timer: 1500
                        })
                })
                .catch(() => {
                     Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
                })
            }
        },
Dach0
quelle
-4

Json muss mit doppelten Anführungszeichen formatiert werden

Mögen:

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

Nicht nur:

headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
         }
Dunks184
quelle
Das gilt für das JSON-Format, aber wenn Sie Javascript verwenden, können Sie Javascript-Zeichenfolgen schreiben, wie Sie möchten, und es funktioniert weiterhin - da der JSON-Serializer in Axios den Unterschied nicht kennt! :-)
Jono