title: How to use proxy with vite (vue frontend) and django rest framework
body: <p>So, you know when you access a view with django rest api on the browser, 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 the proxy setting for vite, 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 have a route on localhost:8000/api, I can do:</p>
  <pre class="lang-js prettyprint-override"><code>//vite.config.js
  export default defineConfig({
      plugins: [vue()],
      server: {
          proxy: {
              //Focus here
              '/api': {
                  target: 'http://localhost:8000',
                  changeOrigin: true,
                  rewrite: (path) =&gt; { console.log(path); return path.replace('/^\/api/', '') }
              }
          }
      }
  })
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>//todo-component.vue
  export default {
      data() {
          return {
              todos: []
          }
      },
      components: {
          TodoElement
      },
      beforeCreate() {
                         //Focus here as well 
          this.axios.get('/api').then((response) =&gt; {
              this.todos = response.data
          })
              .catch((e) =&gt; {
                  console.error(e)
              })
      }
  
  }
  </code></pre>
  <p>This will return the json response as expected. However, if I try to make it so that '/' routes to 'localhost:8000/api/', like this:</p>
  <pre class="lang-js prettyprint-override"><code>export default defineConfig({
      plugins: [vue()],
      server: {
          proxy: {
              //change here
              '/': {
                  target: 'http://localhost:8000/api',
                  changeOrigin: true,
                  rewrite: (path) =&gt; { console.log(path); return path.replace('/^\/api/', '') }
              }
          }
      }
  })
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import TodoElement from &quot;./todo-element.vue&quot;
  export default {
      data() {
          return {
              todos: []
          }
      },
      components: {
          TodoElement
      },
      beforeCreate() {
          //change here
          this.axios.get('/').then((response) =&gt; {
              this.todos = response.data
          })
              .catch((e) =&gt; {
                  console.error(e)
              })
      }
  
  }
  
  </code></pre>
  <p>It just spews out the html version of the api view, but with no styling, with a bunch of errors</p>
  <p><img src="https://user-images.githubusercontent.com/97959091/150623245-e1f68636-8718-4dfd-9b97-64d9dcbb30c8.png" alt="image" /></p>
  <p>No idea what to do. If someone could explain how this proxy works, i'd really love it. I don't want to keep writing &quot;api/&quot;, and it'd be really valuable if I can manage to understand how this works.</p>