I am trying to make an API call to this server, it is working using thunderClient but when i am making a call using my frontend, i am getting this error

Test.jsx:15 Error: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

frontend snippet where the call is being made –

useEffect(() => {
    fetch("<server url>/api/friends/balance", {
      method: "GET",
    })
      .then((response) => response.json())
      .then((data) => {
        console.log("Response:", data);
        setData(data.data); // Update state with the fetched data
      })
      .catch((error) => console.error("Error:", error));
  }, []);

I suspect it has something to do with preflight request, please help me resolve this

backend code –

const app = express()
const router = require('./router')
const connectDB =  require('./DB/dbConnection')
const cors = require('cors');


app.use(express.json());


app.use(cors({
    origin: '*',
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    allowedHeaders: ['Content-Type'],
    credentials: true
  }));
  
  

connectDB();
app.options('*', (req, res) => {
  res.sendStatus(204); 
});
app.use(router);

app.get('/', (req,res)=>{
    res.send('hello world!');
});

const PORT = 3000
app.listen(PORT,()=>{
    console.log(`server running on post ${PORT}`)
})```