Why is Vercel proxy to API route not working?

I have my frontend in Vite (React, TS) and backend in Django. When I make request to backend API route from frontend, it works perfectly fine with requests to the correct API route in local, but the requests are not directed to the correct API route in production.

I have my frontend deployed in Vercel and backend deployed in Render. I have the following backend API routes:

• api/register
• api/login

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    proxy: {
      "/api/": {
        target: "http://localhost:8000",
        changeOrigin: true,
      },
    },
  },
  plugins: [react()],
});

vercel.json

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://mydomain.onrender.com/:path*"
    }
  ]
}

When the client makes request to api/login, the following error message is printed:

XHR POST https://mydomain.vercel.app/api/login/ [HTTP/2 404  37ms]

The frontend should have sent request to https://mydomain.onrender.com/api/login/ but it sends requests to the frontend route https://mydomain.vercel.app/api/login/

How to fix this?

Thanks.

Back to Top