Axios doesn't initiate POST request - axios

Question

I am using webdriverIO version 7 and axios in order to try to make login via API instead of doing it using UI.
This is my code:
getAuthToken({ email, password }) {
// axios
// .post('https://my-app.com/login', {
// j_username: email,
// j_password: password,
// CSRFToken: 'some-token',
// })
// .then((response) => {
// console.log('XXX');
// console.log(response);
// });
const data = {
j_username: email,
j_password: password,
CSRFToken: 'some-token',
};
axios({
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url: 'https://my-app.com/login',
}).then((response) => {
console.log('XXX');
console.log(response);
});
}
I am trying to do it in both ways as above but I don't get ever response printed in the console.
I tried to do the request via Postman and it is working fine.
Also I am monitoring the traffic on the site via Fiddler Everywhere app and when this method gets executed, then nothing is shown in the Fiddler.
On the other hand when I do it via Postman, Fiddler catches it.
This is Raw Postman Request data:
POST https://my-app.com/j_spring_security_check HTTP/1.1
User-Agent: PostmanRuntime/7.28.0
Accept: */*
Cache-Control: no-cache
Postman-Token: 39311680-b11c-4a65-8ff7-2f03b97bf5eb
Host: my-app.com
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Content-Type: multipart/form-data; boundary=--------------------------619522728182415185770824
Cookie: anonymous-consents=%5B%5D; cookie-notification=NOT_ACCEPTED
Content-Length: 436
----------------------------619522728182415185770824
Content-Disposition: form-data; name="j_username"
email#test.com
----------------------------619522728182415185770824
Content-Disposition: form-data; name="j_password"
123456
----------------------------619522728182415185770824
Content-Disposition: form-data; name="CSRFToken"
some-token
----------------------------619522728182415185770824--
This is Raw Request when I do it through Chrome
POST https://my-app.com/j_spring_security_check HTTP/1.1
Host: my-app.com
Connection: keep-alive
Content-Length: 90
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
Origin: https://my-app.com
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: https://my-app.com/login
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cookie: JSESSIONID=some_id; dtCookie=some_data; anonymous-consents=%5B%5D; cookie-notification=NOT_ACCEPTED
j_username=ecx%40test.com&j_password=123456&CSRFToken=some_token
What am I doing wrong? Why it doesn't never log the response while doing it through axios?
Thanks!

Answer 1

The function is written correctly.
Postman passes additional details also which you can to look into.
Lets consider the scenarios which may cause the API call to fail:
Your function might not be correct.
The API is not configured properly.
Issues in the network.
Tackling the first scenario:
Check whether the function getAuthtoken() is getting invoked or not.
There might be an issue of CORS which you need to fix.
As you are send a JSON data, the server side must also accept the JSON data, or specify it in request headers. like
const data = {"name":"Example"}
axios.post('https://linkToApI.com', {
headers: {
'Content-Type': 'application/json',
'Authorization': 'some_auth_method_like_authToken',
specify other necessary headers
},
data
})
Getting to the second scenario:
Configuring the server is important.
make sure there is not any cors issue which is getting in the way.
make sure server is accepting the request data which you are sending.
make sure if the request fails it sends a error response.
Additional changes in the code for debugging purposes:
Whatever code you use please try to add a catch block as if the promise fails we can get the error message why is it failing. below is the example:
axios({
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data: qs.stringify(data),
url: 'https://my-app.com/login',
}).then((response) => {
console.log('XXX');
console.log(response);
}).catch(e=>{console.log(e)}); // this will provide you with info why is it failing