Ik heb een Axios POST-verzoek geschreven zoals aanbevolen in de npm-pakketdocumentatie, zoals:
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})
})
En het werkt, maar nu heb ik mijn backend-API aangepast om headers te accepteren.
Inhoudstype: ‘application/json’
Autorisatie: ‘JWT fefege…’
Dit verzoek werkt prima op Postman, maar wanneer ik een axios-oproep schrijf, volg ik deze linken krijg hem niet helemaal werkend.
Ik krijg constant de foutmelding 400 BAD Request.
Hier is mijn gewijzigde verzoek:
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})
})
Antwoord 1, autoriteit 100%
Als u Axios gebruikt om aangepaste headers door te geven, moet u een object met de headers als laatste argument opgeven
Wijzig uw Axios-verzoek zoals:
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
})
})
Antwoord 2, autoriteit 15%
Hier is een volledig voorbeeld van een axios.post-verzoek met aangepaste headers
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);
})Antwoord 3, autoriteit 6%
Als u headers in een Axios POST-verzoek wilt instellen, geeft u het derde object door aan de axios.post()-aanroep.
const token = '..your token..'
axios.post(url, {
//...data
}, {
headers: {
'Authorization': `Basic ${token}`
}
})
Als u headers in een Axios GET-verzoek wilt instellen, geeft u een tweede object door aan de axios.get()-aanroep.
const token = '..your token..'
axios.get(url, {
headers: {
'Authorization': `Basic ${token}`
}
})
Antwoord 4, autoriteit 2%
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);
})Antwoord 5
U kunt ook interceptoren gebruiken om de headers
te passeren
Het kan u veel code opslaan
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;
});
Antwoord 6
Shubham ‘s Antwoord werkte niet voor mij.
Wanneer u de Axios Library gebruikt en aangepaste koptekers doorgeeft, moet u de kopteksten als object met de sleutelnaam ‘Headers’ aanleggen. De toets ‘Headers’ moet een object bevatten, hier is het Content-Typeen Authorization.
Het onderstaande voorbeeld werkt goed.
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})
})
Antwoord 7
We kunnen headers doorgeven als argumenten,
onClickHandler = () => {
const data = new FormData();
for (var x = 0; x < this.state.selectedFile.length; x++) {
data.append("file", this.state.selectedFile[x]);
}
const options = {
headers: {
"Content-Type": "application/json",
},
};
axios
.post("http://localhost:8000/upload", data, options, {
onUploadProgress: (ProgressEvent) => {
this.setState({
loaded: (ProgressEvent.loaded / ProgressEvent.total) * 100,
});
},
})
.then((res) => {
// then print response status
console.log("upload success");
})
.catch((err) => {
// then print response status
console.log("upload fail with error: ", err);
});
};
Antwoord 8
axios.postkan 3 argumenten accepteren waarvan het laatste argument een configobject kan accepteren waarvan je de header kunt instellen.
Voorbeeldcode bij uw vraag:
var data = {
'key1': 'val1',
'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data, {
headers: {Authorization: token && `Bearer ${ token }`}
})
.then((response) => {
dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
dispatch({type: ERROR_FINDING_USER})
})
Antwoord 9
Als je een eigenschap van het vuejs-prototype gebruikt die niet kan worden gelezen bij het maken, kun je ook headers definiëren en schrijven, bijv.
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");
});
};
Antwoord 10
Interceptors
Ik had hetzelfde probleem en de reden was dat ik het antwoord niet in de interceptor had teruggestuurd. Javascript dacht, terecht, dat ik undefinedterug wilde geven voor de belofte:
// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});