Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

630
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!