Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

622
Vistas
Cómo usar proxy con vite (vue frontend) y django rest framework

Entonces, ¿sabe cuando accede a una vista con django rest api en el navegador, obtiene una página html y cuando envía algo como una solicitud ajax, obtiene el json? Estoy tratando de descubrir cómo alterar la configuración del proxy para vite, pero no puedo encontrar una sola documentación decente al respecto. Quiero redirigir '/' a 'http://localhost:8000/api', pero hay un comportamiento realmente extraño. Si tengo una ruta en localhost:8000/api, puedo hacer:

 //vite.config.js export default defineConfig({ plugins: [vue()], server: { proxy: { //Focus here '/api': { target: 'http://localhost:8000', changeOrigin: true, rewrite: (path) => { console.log(path); return path.replace('/^\/api/', '') } } } } })
 //todo-component.vue export default { data() { return { todos: [] } }, components: { TodoElement }, beforeCreate() { //Focus here as well this.axios.get('/api').then((response) => { this.todos = response.data }) .catch((e) => { console.error(e) }) } }

Esto devolverá la respuesta json como se esperaba. Sin embargo, si trato de hacer que '/' se dirija a 'localhost:8000/api/', así:

 export default defineConfig({ plugins: [vue()], server: { proxy: { //change here '/': { target: 'http://localhost:8000/api', changeOrigin: true, rewrite: (path) => { console.log(path); return path.replace('/^\/api/', '') } } } } })
 import TodoElement from "./todo-element.vue" export default { data() { return { todos: [] } }, components: { TodoElement }, beforeCreate() { //change here this.axios.get('/').then((response) => { this.todos = response.data }) .catch((e) => { console.error(e) }) } }

Simplemente arroja la versión html de la vista API, pero sin estilo, con un montón de errores.

imagen

Ni idea de qué hacer. Si alguien pudiera explicar cómo funciona este proxy, me encantaría. No quiero seguir escribiendo "api/", y sería muy valioso si pudiera entender cómo funciona esto.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Estás un poco confundiendo las cosas y trataré de mostrarte por qué.

Si redirige la ruta raíz / a /api , cada solicitud enviada a su aplicación que se ejecuta en http://localhost:3000 se reenviará a http://localhost:8000/api . Significa que no podrá servir nada desde la aplicación en ejecución, pero obtendrá una respuesta del punto final configurado ( localhost:8000/api ) para cada solicitud.

Para entender fácilmente lo que está pasando, tenga en cuenta que esta vite config option (server.proxy) actúa como un proxy inverso. Como ejemplo, tomo el recurso favicon.ico de su aplicación.

Con su configuración actual, cuando desde su navegador intenta acceder a su aplicación, /favicon.ico (y todos los demás recursos) se cargan desde http://localhost:8000/api/favicon.ico y ya no desde su aplicación ejecutándose en http://localhost:3000/favicon.ico .

Esto explica todos los errores en la consola. Nuevamente, por ejemplo, /static/rest_framework se carga desde http://localhost:8000/api/ y no desde http://localhost:3000/ .

La documentación es bastante clara, solo es cuestión de entender qué es un proxy http . Para obtener más información, puede dirigirse a https://github.com/http-party/node-http-proxy#core-concept

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda