I have full stack application which i deployed on netlify, my frontend structure (vanilaJS) is following:

client
-index.html
-training.html
-scripts
-style

My backend is in Express and successfuly deployed to Heroku. I have the following rutes:

const express = require('express')
const app = express()


const trainingRoute = require('./routes/training')

app.use('/training', trainingRoute)

In the index.html on frontend i have card:

<div class="trening-plan-container">
   <div class="plan-btn">
       <button><a href="training/452153221489">Pogledaj</a></button>
   </div>
</div> 

452153221489 is id of item in database. When i click on link, i get my url:

https://example.netlify.app/training/452153221489

and i get 404 status, not found.

How can i make request to my backend route /training/452153221489 which i have defined in
app.use('/training', trainingRoute) :

const express = require('express')
const router = express.Router()
const {
  getTrainingPlan,
} = require('../controllers/trainingPlan')


router.route('/:id').get(getTrainingPlan)


module.exports = router

When i use fetch, everything works, because i specify full url
https://trening-bek.herokuapp.com/training/452153221489

After days of research i have found proxy might be the solution but it doesn't work.

I could use <a href="training/?id=452153221489">Pogledaj</a> then retreive id and make fetch api call but I'm not sure that's the way it should be done.

Is it bad practice to seperate frontend and backend on two servers?