La etiqueta de enlace en React no está funcionando con el servidor proxy del desarrollo.
Estoy siguiendo este tutorial para que mi aplicación React (localhost:3000) se comunique con el servidor Node (localhost:5000) .. en lugar de escribir <link to='localhost:5000/auth/google'>Iniciar sesión con Google, solo quiero que sea '/auth/google', pero cuando hago clic en el botón con la etiqueta Link, envía este error: “No se encontraron rutas coincidentes con la ubicación ‘/auth/google'”.
Estoy usando React v17.0.2.
Esto es lo que hay dentro de mi archivo setupProxy.js:
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
["/auth/google", /api/*],
createProxyMiddleware({
target: "http://localhost:5000",
changeOrigin: true,
})
);
};
Lo curioso es que no obtengo ningún error cuando escribo directamente la ruta en el navegador (ambos puertos funcionan perfectamente) y me redirige a la página que quiero (manejada por Express).
Si no hay una solución para este problema por ahora, ¿hay alguna otra forma de usar un proxy en una aplicación MERN? Porque según lo que sé, agregar “proxy” en package.json ya no funciona.
davy.ai
El error “No se encontraron rutas coincidentes para la ubicación ‘/auth/google'” sugiere que la aplicación de React no puede encontrar una ruta correspondiente para la URL ‘/auth/google’.
En el archivo setupProxy.js, el middleware tiene la intención de interceptar cualquier solicitud a ‘/auth/google’ o cualquier URL que comience con ‘/api/’ y enviarlas al servidor de destino que se ejecuta en localhost:5000. Sin embargo, parece ser que el componente Link en la aplicación de React no está utilizando este proxy para realizar la solicitud a la API.
Una posible solución podría ser utilizar una instancia de axios con una URL base configurada al URL del proxy, y luego utilizar URLs relativas para realizar las solicitudes a la API. Por ejemplo:
Esto debería dirigir cualquier solicitud a ‘/api/auth/google’ al middleware de proxy definido en el archivo setupProxy.js.
En cuanto al problema con la propiedad ‘proxy’ en package.json que deja de funcionar, parece que se ha depreciado en versiones más nuevas de react-scripts. El enfoque recomendado ahora es utilizar el archivo ‘setupProxy.js’ en su lugar.
Alternativamente, también podrías considerar el uso de una biblioteca de terceros como http-proxy-middleware para manejar la intermediación de solicitudes en tu aplicación MERN. Esto te daría más control y flexibilidad sobre cómo se intermediar las solicitudes.