如何在 vite（vue 前端）和 django rest 框架中使用代理

Question

所以，你知道当你在浏览器上使用 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)
            })
    }

}

这将 return 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)
            })
    }

}

它只是吐出 api 视图的 html 版本，但没有样式，有一堆错误

不知道该怎么办。如果有人能解释这个代理是如何工作的，我真的很喜欢它。我不想继续写“api/”，如果我能设法理解它是如何工作的，那将非常有价值。

Answer 1

你有点令人困惑，我会试着告诉你原因。

如果您将根路径 / 重定向到 /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

如何在 vite（vue 前端）和 django rest 框架中使用代理

How to use proxy with vite (vue frontend) and django rest framework

javascript

django

django-rest-framework

vue.js

vite