Setting up multiple proxies in vite app(React) when running multiple local instances of backend

Question

I have created two microservices for User Service and Product Service using Golang for backend and created front end using React with vite. I have setup two proxies for two services in vite as below:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8081",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
      "/api1": {
        target: "http://127.0.0.1:8082",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api1/, ""),
      }
    },
    port: 5173,
  },
})

but when i attached :8081 to "/api" then its working but ":8082" which is attached to "/api1" is giving follwing error: Login.jsx:13 POST http://localhost:5173/api1/user/login 404 (Not Found) Login.jsx:26 SyntaxError: Unexpected non-whitespace character after JSON at position 4 (line 1 column 5)

and when i swap it, like "/api" - ":8082" and "/api1" - ":8081" then again "/api" - ":8082" is working now giving error for ":8081". My code is attached above i don't know where i am going wrong

It should send fetch requests to two servers running in local(localhost:8081 and localhost:8082) successfully.