Tengo una aplicación de pila completa que implementé en netlify, mi estructura de interfaz (vanilaJS) es la siguiente:

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

Mi backend está en Express y se implementó con éxito en Heroku. Tengo las siguientes rutas:

 const express = require('express') const app = express() const trainingRoute = require('./routes/training') app.use('/training', trainingRoute)

En el index.html en la interfaz tengo la tarjeta:

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

452153221489 es la identificación del artículo en la base de datos. Cuando hago clic en el enlace, obtengo mi URL:

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

y obtengo el estado 404, no encontrado.

¿Cómo puedo hacer una solicitud a mi ruta de back-end /training/452153221489 que he definido en
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

Cuando uso fetch , todo funciona, porque especifico la URL completa
https://trening-bek.herokuapp.com/training/452153221489

Después de días de investigación, encontré que el proxy podría ser la solución, pero no funciona.

Podría usar <a href="training/?id=452153221489">Pogledaj</a> y luego recuperar la identificación y hacer una llamada de búsqueda de API, pero no estoy seguro de que sea así.

¿Es una mala práctica separar el frontend y el backend en dos servidores?