Unexpected token '<', "<!DOCTYPE "... is not valid JSON

I'm beginner in Reactjs and new here at StackOverflow. Actually, I'm trying to pass the data from backend to frontend. But instead of fetching the JSON data from the backend url, it is getting data from index.html of the frontend. My backend is nodejs. Basically, I want to get JSON data from backend and post the data in the console of frontend. But I'm getting this SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON Can anyone help me to resolve this. reactjsnodejs

Frontend code

App.js
import React from 'react';
import {useState, useEffect} from 'react';
import {getOrder} from './ApiCalls.js'

function App() {

  const[values, setValues]=useState({
    amount:0,
    orderId:''
  })
  const{amount, orderId}=values

  useEffect(() => {
    createorder()
  }, [])
  
  
  const createorder=()=>{
    getOrder().then(response=>console.log(response))
  }

  const showRazorPay=()=>{
    const form=document.createElement('form')
    form.setAttribute('action',`${process.env.REACT_APP_BACKEND}/payment/callback`);
    form.setAttribute('method',"POST");
    const script=document.createElement("script");
    script.src= "https://checkout.razorpay.com/v1/checkout.js";
    script.setAttribute("data-key",process.env.REACT_APP_DATA_KEY);
    script.setAttribute("data-amount", amount);
    script.setAttribute("data-prefill.contact","9561315545");
    script.setAttribute("data-order_id", orderId);
    script.setAttribute("data-prefill.name", "Priyanka Chaudhari");
    script.setAttribute("data-image", `${process.env.REACT_APP_BACKEND}/logo`)
    script.setAttribute("data-buttontext","Donate Now!");
    document.body.appendChild(form);
    form.appendChild(script);
    const input= document.createElement("input");
    input.type="hidden";
    input.custom="Hidden Element";
  }
  return (
    <div>

    </div>
    
  );
}

export default App;

ApiCalls.js
export const getOrder=()=>{
    return fetch(`${process.env.REACT_APP_BACKEND}/createorder`,{
        method: "GET",
        headers: {
            'Content-Type':'application/json'
        }
    }).then(response=>response.json())
    .catch((err)=>console.log(err))
}

Backend Code

App.js
const express=require('express')
const bodyParser=require('body-parser')
const cors=require('cors')
const app=express()
const PaymentRoute=require('./PaymentRoute')

app.use(bodyParser.json())
app.use(cors())

app.use('/api',PaymentRoute);


app.listen(5000,()=>{
    console.log(`App is running at 5000 port`)
})

PaymentRoute.js
const express=require('express')
const router=express.Router()
const{CreateOrder,paymentCallback,getLogo}=require('./PaymentController')

router.get('/createorder',CreateOrder);
router.post('/payment/callback',paymentCallback)
router.get('/logo',getLogo)
module.exports=router;

PaymentController.js
require('dotenv').config()
const Razorpay=require('razorpay')
const uniqueId=require('uniqid')
const path=require('path')


var instance = new Razorpay({ key_id: process.env.KEY_ID, key_secret: process.env.SECRET_KEY })

// instance.payments.fetch(paymentId)
exports.CreateOrder=(req,res)=>{
    var options = {
        amount: 50000,  // amount in the smallest currency unit
        currency: "INR",
        receipt: uniqueId()
      };
      instance.orders.create(options, function(err, order) {
        if(err){
        return    res.status(500).json({
                error:err
            })
        }
        res.json(order)
      });
}
exports.paymentCallback=(req,res)=>{

}
exports.getLogo=(req,res)=>{
  res.sendFile(path.join(__dirname,'donate-image.png'))
}