Saltar al contenido principal

Problemas con APIs en una aplicacion de Next js App Router

Alejandro Javier Morales

Tengo desplegada una aplicacion en Next Js que funciona Ok en local, pero en el servidor apache no logro hacer que funciones las APIs ya que siempre me devuelve error de URL:
Estoy probando lo más basico posible, desde Insomnia una peticion Get a https://dominio y devuelve el siguiente error en el log del servidor

App 3789948 output: code: 'ERR_INVALID_URL',
App 3789948 output: input: '/api/statistics?city=Los%20Reartes',
App 3789948 output: base: 'https, https://localhost:3000/api/statistics?city=Los%20Reartes'

Es como que la aplicacion transforma todas las peticiones a localhost:3000 en lugar de mantener el dominio:

Aclaracion: Si la peticion se hace con http funciona y devuelve la respuesta esperada, el problema es con https 

Probe con redirecciones en el htaccess, en el next-config de la aplicacion y hasta con un middleware pero evidentemente no he hecho lo correcto.
Necesito resolverlo a la brevedad ya que tengo el desarrollo estancado por este problema.
Espero alguien haya tenido esta experiencia y lo hhaya podido resolver. Si alguien puede ayudarme se los voy a a gradecer.

0

Comentarios

7 comentarios

Fecha Votos
  • Alejandro Torres

    Hola Alejandro Javier Morales

    Según ese log que es de Node, la petición web está ingresando bien a tu App, por lo que está bien configurada en el Node Selector dentro de cPanel.

    Luego, como decís, parece que la petición de input '/api/statistics?city=Los%20Reartes' se transforma con el basePath de Next y le agrega el host. Si no definís un basePath, Next por defecto usa el host "localhost:3000" y ahí deberías mencionar tu dominio, sin http, https o puerto. También podés probar usando "/" o "/api" (sin dominio).

    Todo dependerá de como programaste tu app, sus rutas y cómo lo configuraste dentro de la App de Node en cPanel.

     

     

    0
  • Alejandro Javier Morales
    • Editado

    Hola Alejandro Torres, estoy probando usar basePath pero me rompe todo el resto. Hasta el momento el problema lo tenia  con las APIs y usando http, pero al agregar basePath se rompen todas las rutas a imagenes paginas, etc..
    en la app de Node en Cpanel tengo configurada que mi ruta fisica es la carpeta "xxx"
    defini basePath probando varias opciones, que me dan bad gateway o error 404.
    /dominio
    /dominio/
    dominio
    /xxx
    xxx/

    Note que se al basePath le pongo mi dominio cuando me da error 404 por consola me marca rutas como https://midominio/midominio.  como que salvo con las APIS en https, en el resto de los casos tomo perfecto las rutas en produccion. Como si el problema fuera de redireccion https y para /api


    en el next config tengo lo siguiente

    /** @type {import('next').NextConfig} */
    const nextConfig = {

        basePath: process.env.NODE_ENV === 'development' ? '' :  process.env.NEXT_PUBLIC_BASE_PATH_PROD,

      async rewrites() {
        return [
          {
            source: '/api/message',
            destination: 'https://dominio/api/message',
          },
          {
            source: '/en',
            destination: '/',
            /* locale: false, */ // Desactiva la detección del locale para esta redirección
          },
          {
            source: '/about', // La URL que quieres que se muestre
            destination: '/pages/about', // La ruta real de tu página interna
          },
          {
            source: '/en/about', // La URL que quieres que se muestre
            destination: '/pages/about', // La ruta real de tu página interna
            /* locale: false, */
          },
          {
            source: '/publicar',
            destination: '/pages/publicar',
          },
          {
            source: '/en/publicar',
            destination: '/pages/publicar',
          },
          {
            source: '/admin',
            destination: '/pages/admin',
          },
        ];
      },
      /* async redirects() {
        return [
          {
            source: '/',
            destination: 'https://dominio',
            permanent: true,
          },
        ]
      }, */
      async headers() {
        return [
          /* {
            source: '/api/:path*',
            headers: [
              {
                key: 'Access-Control-Allow-Origin',
                value: '*',
              },
              {
                key: 'Access-Control-Allow-Methods',
                value: 'GET,POST,PUT,DELETE,OPTIONS',
              },
              {
                key: 'Access-Control-Allow-Headers',
                value: 'Content-Type, Authorization',
              },
            ],
          }, */
          {
            source: '/',
            headers: [
              {
                key: 'Set-Cookie',
                value: 'NEXT_LOCALE=es; Path=/',
              },
            ],
          },
          {
            source: '/en',
            headers: [
              {
                key: 'Set-Cookie',
                value: 'NEXT_LOCALE=en; Path=/',
              },
            ],
          },
        ];
      }
    };

    export default nextConfig;
    0
  • Alejandro Torres

    Alejandro Javier Morales según veo en la siguiente linea:

    basePath: process.env.NODE_ENV === 'development' ? '' :  process.env.NEXT_PUBLIC_BASE_PATH_PROD,

    Si ejecutas tu app en modo "development" el basePath será vacío, es decir, por defecto quedaría "localhost:3000", y si ejecutás tu app en otro modo (por ejemplo "production"), el basePath sería el valor de process.env.NEXT_PUBLIC_BASE_PATH_PROD

     

    0
  • Alejandro Javier Morales

    Si. claro. En modo dev funciona como localhost:3000 y el produccion toma el valor de la variable de entorno NEXT_PUBLIC_BASE_PROD que la defino en la configuracion de la aplicacion de node en cpanel.
    Pero eso me rompe la aplicacion

    0
  • Alejandro Torres

    Te sugiero que a NEXT_PUBLIC_BASE_PROD le pruebes asignar los siguientes valores (cada vez que lo cambies tenés que reiniciar la aplicación):

    NEXT_PUBLIC_BASE_PROD = /
    NEXT_PUBLIC_BASE_PROD = dominio
    NEXT_PUBLIC_BASE_PROD = dominio/

    En cada caso luego de aplicar ese valor y reiniciar, revisá si te accede y sino revisá el log a ver cómo lo está tomando en la linea del log que menciona a "output base".

    0
  • Alejandro Javier Morales

    Buen dia Alejandro. Hice todas las pruebas y no funciona.
    si a basePath le pongo / da error diciendo que debe ser un string vacio o una ruta, si le pongo solo el dominio da error diciendo que le falta / adelante, si le pongo dominio/ da error diciendoo que le falta /, sile pongo /dominio/ da error diciendo que no va la / final. Si pongo /dominio da error 404 en ell log del servidor y en el navehador mustra la pagina 404 de Next y en la consola dell navegador igual.

    Por lo que estuve leyendo, basePath se usa cuando corres la aplicacion en una subcarpeta, el tema es que aca, si bien la aplicacion esta en una subcarpeta xxx, cuando definis la ruta fisica en la app de node en cpanel especificas esa carpeta que pasa a ser la raiz del dominio y deja de ser subcarpeta.
    Yo insisto en que el problema esta en la configuracion del servidor y en como redirecciona las peticiones https, porque si no, no debe rian funcionar la peticiones GET http y funcionan ok.
    La verdad que ya no se que hacer...

    0
  • Staff WNPower

    Hola Alejandro! Si bien te respondimos tu ticket de soporte, también lo dejamos por aquí para la comunidad:

    En el github oficial de Next.JS actualmente hay mencionado un problema con el header "X-Forwarded-Proto" que afecta justamente al acceso vía rewrite como lo implementa cPanel.

    https://github.com/vercel/next.js/discussions/64504#discussioncomment-9156578

    Para solucionarlo, simplemente se debe eliminar ese header HTTP con la siguiente directiva en tu archivo .htaccess:

    RequestHeader unset X-FORWARDED-PROTO

     

    1

Iniciar sesión para dejar un comentario.

¿No encontraste lo que buscabas?

Nueva publicación