title: I can't setup proxy in mern stack(react-vite) and do not know the reason
body: <p>I'm developing mern stack web application with react from vite.js and have a problem to deal with proxy.</p>
  <p>my client side runs at <code>http://localhost:3000</code> and server side runs at <code>http://localhost:5000</code>.</p>
  <p>usually I use http-proxy-midlleware to connect my server and client like below</p>
  <p>src/setupProxy.jsx</p>
  <pre><code>const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app){
    app.use(
        createProxyMiddleware('/api', {
            target: 'http://localhost:5000',
            changeOrigin: true
        })
    )
  };
  </code></pre>
  <p>However, It didn't work and still sent to localhost:3000 when I post data to server with axios. I googled it and figured out that with vite.js I need to use vite.config.js</p>
  <p>so I set up vite.config.js like below</p>
  <p>import { defineConfig, HttpProxy } from 'vite'
  import react from '@vitejs/plugin-react'</p>
  <p>// <a href="https://vitejs.dev/config/" rel="nofollow noreferrer">https://vitejs.dev/config/</a></p>
  <pre><code>export default defineConfig({
      plugins: [react()],
      server: {
          host: true,
          port : 3000,
          proxy: {
              '/api': {
                  target: 'http://localhost:5000',
                  changeOrigin: true
              }
          }
          
      },
    
  
  })
  </code></pre>
  <p>and tried axios call again.</p>
  <pre><code>const result = await axios.post('api/users/login', dataToSubmit)
                  .then(res =&gt; res.data);
              return result;
  </code></pre>
  <p>However, contrary to my expectation, It still sent to 3000 and I do not have a clue about what is going wrong :/</p>
  <pre><code>xhr.js:210          POST http://localhost:3000/api/users/login 404 (Not Found)
  </code></pre>
  <p>could you tell me how to fix it? thanks for reading, your help will be appreciated.</p>