es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vue.js proxie api con puertos diferentes y dinámicos.

01 Jun, 2023 Programación

Hice una aplicación que utiliza la API REST de un servidor, que inicia diferentes instancias en diferentes puertos. Actualmente estoy usando el proxy del devserver para acceder a la API maestra, pero no pude averiguar cómo acceder a diferentes puertos con la misma ruta.

Actual vue.config.js:

module.exports = {
transpileDependencies: [“vuetify”],
devServer: {
proxy: ‘http://localhost:10000’,
},
};

Estoy tratando de lograr algo como esto:

{
‘/world’: {
target: ‘http://localhost:10001’,
pathRewrite: {‘^/world/’: ‘/world/’},
},
‘/world’: {
target: ‘http://localhost:10002’,
pathRewrite: {‘^/world/’: ‘/world/’},
}
}

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para acceder a diferentes puertos con la misma ruta, puede configurar el proxy de su servidor de desarrollo en vue.config.js para utilizar múltiples objetivos y pathRewrite. Aquí hay una configuración de ejemplo:

    module.exports = {
  transpileDependencies: ['vuetify'],
  devServer: {
    proxy: {
      '/world': {
        target: 'http://localhost:10001',
        pathRewrite: { '^/world': '' },
      },
      '/world': {
        target: 'http://localhost:10002',
        pathRewrite: { '^/world': '' },
      },
    },
  },
};

    En esta configuración, se definen los dos objetivos diferentes para la ruta “/world”, con pathRewrite utilizado para eliminar el prefijo “/world” de la solicitud antes de enviarla al servidor de destino. Al hacer solicitudes a “/world” en su aplicación Vue.js, el proxy del servidor de desarrollo enrutará automáticamente las solicitudes al objetivo apropiado en función de la ruta en sí.

Comments are closed.