0
170
ViewsImplementar el back-end de JS y proporcionarle un front-end de React existente como un URI `/api`
Tengo una aplicación React, que llama internamente: /api/* acciones. En mi caso, estas acciones son satisfechas por NginX que carga el código de back-end relevante y devuelve la respuesta JSON.
Me gustaría que esta aplicación React fuera "autoservicio", me gustaría implementar el back-end API: /api/* usando JS, para que el código se ejecute en el navegador.
Mi aplicación usa: react-router
<BrowserRouter> <Switch> <Route path={"/users/:path*"} component={UsersPage} /> <Route path={"/api/:action*"} component={ApiComponent} /> // Return RAW Json here, is it possible? <Route component={NotFoundPage} /> </Switch> </BrowserRouter> ¿Es posible de alguna manera resolver /api/* , para poder implementarlo en mi ApiComponent y devolver JSON sin formato?
También he experimentado con Express JS:
app.group("/api", (router) => { router.get("/action", (req, res) => { // Implement API action here }); }); app.use('/public', express.static('public')) // This allows assets to be loaded from filesystem app.get("*", (req, res) => { res.sendfile('./index.html'); // This loads React app });que funcionó muy bien, pero ahora terminé con un problema, cómo ejecutar este Express JS / NodeJS, en un contexto de navegador.
En otras palabras, mi pregunta es cuáles son las formas de implementar API en el front-end, proporcionar a la aplicación React existente y ejecutarlo todo en el navegador.
2 answers
Answer question0
Si está utilizando una biblioteca de cliente HTTP como Axios, puede usar un interceptor, que es una función que se llama para cada solicitud HTTP realizada y la respuesta recibida por su aplicación en el navegador.
Aquí está el código de ejemplo,
// Add a request interceptor axios.interceptors.request.use(function (request) { // Do something before request is sent request.headers.Authorization = 'Bearer <token>'; return request; }, function (error) { // Do something with request error return Promise.reject(error); }); // Add a response interceptor axios.interceptors.response.use(function (response) { // Do something with response data if (response.status === 401) { window.location = '/login'; } return response; }, function (error) { // Do something with response error return Promise.reject(error); });Otra forma es registrar un trabajador de servicio, que básicamente actúa como un servidor proxy y puede interceptar todas las solicitudes HTTP.
Además, puede usar una extensión de navegador como https://github.com/kzahel/web-server-chrome que crea un servidor web para Chrome, sirve páginas web desde una carpeta local a través de la red, usando HTTP. Se ejecuta sin conexión.
0
Es imposible que los elementos de React devuelvan JSON sin procesar porque todos los elementos de React devuelven un objeto especial.
Tal vez, debería configurar un proxy en su paquete web/configuración de vite para apuntar todas las solicitudes /api a su servidor de nodo.