My front-end, built with React, is having trouble retrieving data from a third-party API through my Node.js backend. Despite using axios.post request, the response remains undefined and I'm stuck at handling the asynchronous request. It appears that the frontend isn't aware whether the request has been resolved or if a response has been sent.
Here's the snippet of the front-end code causing the issue:
/* eslint-disable import/no-anonymous-default-export */
import axios from "axios";
require("dotenv").config();
let myAPI = axios.create({
baseURL:"my api url",
});
export default {
authAPI: async () => {
try {
const response = await myAPI.post("auth/token");
console.log(response);//it never gets to this console
} catch (error) {
console.error(error);//it never gets to this console
}
},
};
And here's the corresponding code in my API setup (the backend seems to be receiving valid responses with status code 200 and all required data):
import axios from "axios";
import express from "express";
const app = express();
const port = 3004;
axios.defaults.baseURL = 'third-party API url';
axios.defaults.headers.post['accept'] = 'application/json';
axios.defaults.headers.post['Content-Type'] = 'application/json';
const instancePost = axios.create({
});
app.post('/auth/token', (req,res) => {
instancePost.post('auth/token', {
username: 'username',
password: 'password',
ttl: '0'
})
.then((response) => response)
.then((response) => {
console.log('Success!');
})
.catch( (error) => {
error
console.log('error')
})
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`));
This is how my network activity looks like: https://i.sstatic.net/rj4l7.png