Как использовать прокси с vite (vue frontend) и django rest framework

Так, вы знаете, что когда вы обращаетесь к представлению с помощью django rest api в браузере, вы получаете html-страницу, а когда вы посылаете что-то вроде ajax-запроса, вы получаете json? Я пытаюсь понять, как изменить настройки прокси для vite, но не могу найти ни одной приличной документации по этому вопросу. Я хочу перенаправить '/' на 'http://localhost:8000/api', но происходит очень странное поведение. Если у меня есть маршрут на localhost:8000/api, я могу сделать:

//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)
            })
    }

}

Это вернет json-ответ, как и ожидалось. Однако, если я попытаюсь сделать так, чтобы '/' маршрутизировался на 'localhost:8000/api/', например так:

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)
            })
    }

}

Он просто выплевывает html версию api view, но без стилизации, с кучей ошибок

image

Не знаю, что делать. Если кто-то может объяснить, как работает этот прокси, я был бы очень рад. Я не хочу постоянно писать "api/", и было бы очень ценно, если бы я смог понять, как это работает.

Вы немного путаете вещи, и я попытаюсь показать вам почему.

Если вы перенаправите корневой путь / на /api, каждый запрос , отправленный вашему приложению, запущенному на http://localhost:3000, будет перенаправлен на http://localhost:8000/api. Это означает, что вы не сможете обслуживать что-либо из запущенного приложения, но вы будете получать ответ от настроенной конечной точки (localhost:8000/api) на каждый запрос.

Чтобы легко понять, что происходит, имейте в виду, что этот vite config option (server.proxy) действует как обратный прокси. В качестве примера я возьму favicon.ico ресурс вашего приложения.

При вашей текущей конфигурации, когда из браузера вы пытаетесь получить доступ к вашему приложению, /favicon.ico (и все остальные ресурсы) загружается из http://localhost:8000/api/favicon.ico, а не из вашего приложения, запущенного на http://localhost:3000/favicon.ico.

Это объясняет все ошибки в консоли. Опять же, например, /static/rest_framework загружается из http://localhost:8000/api/, а не из http://localhost:3000/.

Документация достаточно понятна, нужно лишь понять, что такое http-proxy. Для получения дополнительной информации вы можете перейти по адресу https://github.com/http-party/node-http-proxy#core-concept

Вернуться на верх