Weird behavior proxy with django rest framework

[bryangeplant]

So, you know when you access a view with django rest api, you get an html page, and when you send something like an ajax request, you get the json? I'm trying to figure out how to mess with proxy, but I can't find a single decent documentation around it. I want to redirect '/' to 'http://localhost:8000/api', but there's really weird behavior going on. If I do this:

//vite.config.js
export default defineConfig({
	plugins: [vue()],
	server: {
		proxy: {
			'/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() {
		this.axios.get('/').then((response) => {
			this.todos = response.data
		})
			.catch((e) => {
				console.error(e)
			})
	}

}

and make requests using '/api', it works as expected. However, if I do

export default defineConfig({
	plugins: [vue()],
	server: {
		proxy: {
			'/': {
				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() {
		this.axios.get('/').then((response) => {
			this.todos = response.data
		})
			.catch((e) => {
				console.error(e)
			})
	}

}

It just spews out the html version of the api view, but with no styling, with a bunch of errors

No idea what to do. If someone could explain how this proxy works, i'd really love it.

[RoadToML]

Hey, its probably been a while, but do you remember how or if you fixed this? cheers!

[ZebNoid]

🤦 don't make proxy for root '/' it won't work. your vue frontend is on it.