401 Mysterious unauthorized - post

Question

Hello fellow programmers,
I've got the following problem. I do a post request with axios as shown below:
componentDidMount() {
const config = {
headers: { Authorization: `Bearer ${Auth.getToken()}` },
};
const urlCategories = "http://localhost:8090/category";
axios.get(urlCategories, config).then((res) => {
const categories = res.data;
this.setState({ categories });
console.log(this.state.categories);
});
const urlTricks = "http://localhost:8090/trick/" + Auth.parseJwt().sub;
axios.get(urlTricks, config).then((res) => {
const tricks = res.data;
this.setState({ tricks });
console.log(this.state.tricks);
});
}
This works! :D
Then I want to do the same but later, so I almost copied this BUT...
I get a 401 while I can't see any real difference between the two. I even asked my teacher and he didn't know the answer to it.
handleChecked = () => {
if (this.state.learned) {
this.setState(
{
learned: false,
},
() => {
console.log("Should be false and is: " + this.state.learned);
const config = {
headers: { Authorization: `Bearer ${Auth.getToken()}` },
};
axios
.post(
"http://localhost:8090/user/" +
Auth.parseJwt().sub +
"/" +
this.props.id +
"/" +
this.state.learned,
config
)
.then(() => {
console.log(this.props.name + " set to: " + this.state.learned);
});
}
);
} else { }
The weird thing is; it works in Postman so my conclusion is there must be something wrong with the front-end. Back-end should be okay. If you're curious: Auth.parseJwt().sub gets the username (I know it's a weird name for a username). Another weird thing is when I copy the URL in the Chrome Inspect overview and use it in Postman, it works...
Does anyone know or see what is wrong with this code?

Answer 1

My name is Appeltaart and if it works in postman, the back-end should be fine just as you said. You can start your application from scratch or try this :D
axios.post(`http://localhost:8090/user/${Auth.parseJwt().sub}/${this.props.id}/${this.state.learned}`, {
headers: {
Authorization: `Bearer ${Auth.getToken()}`,
"Content-Type": "application/json"
}
}).then(() => {
console.log(this.props.name + " set to: " + this.state.learned);
});
Friendly Greetings,
Your Applepie