I am a beginner in JavaScript and I have started using Express to create a REST API for the backend of my current project. However, I am encountering an issue where the API is returning undefined or the fetch statement in my main.js file seems to be altering the response. Below is the relevant backend code:
import express from 'express';
import cors from 'cors';
const app = express();
app.use(cors());
app.use(express.json());
app.use((req, _, next) => {
console.log(req);
next();
});
//setting up express.js
//handling requests
app.get('/', async (_, res) => {
res.send({ url:'https://gifdb.com/images/high/you-got-rick-rolled-rick-astley-dance-2s99zcvywfvs3kao.gif' });
});
//start the server
app.listen(8080, () => console.log('http://localhost:8080/'));
Here is the code responsible for fetching the data:
const response = await fetch('http://localhost:8080/', {
method: 'GET',
});
const { image } = await response.json();
console.log(image)
const result = document.querySelector('#result');
result.innerHTML = `<img src="${image}" width="512" />`;