问意料之外的标记'<'，"<!DOCTYPE“不是有效的JSON

EN

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))
}

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'))
}