Backend and frontend work seperately fine. but why frontend not load backend data on vercel?

Question

I deployed my frontend and backend in vercel today. before this happen there was a error not 404 in backend. but when someone in stackoverflow said that change root file server.js--> index.js. so i do that and backend now work fine. not both frontend and backend deployed and work fine but backend data not load to frontend.

this is my backend after deployed

this is the error come from frontend

Failed to load resource: net::ERR_CONNECTION_REFUSED

//backend index.js

//import required modules
const express = require('express');
require('dotenv').config();
const mongoose = require('mongoose');
const cors = require('cors')

const NoteRoutes = require('./routes/noteRoutes')


const { getCategory, deleteCategory, getOneCategryData } = require('./controller/categoryController')
const { getDynamicNoteData, DeleteInActiveNotes, AutoHardDeleteNotes } = require('./controller/noteController')

//initialize express app
const app = express();

// Middleware to parse incoming requests with JSON
app.use(express.json())

//middleware to handle cors policy 
app.use(cors());


app.get('/', (req, res) => {
    res.json({ message: 'Welcome to Note API' })
})

app.use('/note', NoteRoutes)


//manually create routes because of casting issues
app.get('/search', getDynamicNoteData)
app.delete('/remove', DeleteInActiveNotes)
app.get('/category', getCategory)
app.get('/category/:id', getOneCategryData)
app.delete('/category/:id', deleteCategory)


const PORT = process.env.PORT;
const URL = process.env.URL;


//establish connection to mongodb  database using mongoose
mongoose.connect(URL)
    //if connection success display the success messages
    .then(() => {
        console.log("Connected with MongoDB");

        //call auto deletion function
        AutoHardDeleteNotes()

        //app listning port
        app.listen(PORT, () => {
            console.log("Server is running on port " + PORT);
        })
    })
    //if there is a error on connecting show display the error message
    .catch(err => {
        console.log("Application has Following Errors:  \n" + err);
    })

//some code on frontend

const fetchDefaultNotes=()=>{
    setLoading(true)
    axios.get('http://localhost:3000/note/active')
    .then((res)=>{
      setNotes(res.data.data);
      setLoading(false)
      console.log(res.data)
    })
    .catch((err)=>
    console.log(err)
    )
  }

when you run locally your frontend and backend, i work fine and all process done right.. even when i run my backend code, deployed frontend work without any error..