I have an issue with Vite+React project.

I used Vite proxy to fetch data via api and it’s working well in local.

But 401 error is caused when it’s deployed to Vercel.com.

Vite configuration is like this.

server: {
    proxy: {
      '/api': {
        target: baseUrl,
        changeOrigin: true,   
        rewrite: (path) => {
          const urlObj = new URL(
            path,
            baseUrl+ path.replace(/^/api/, ''),
          );

          urlObj.searchParams.set(
            'appId',
            process.env.API_KEY as string,
          );
          urlObj.searchParams.set('lang', 'en');
          urlObj.searchParams.set('units', 'metric');

          return urlObj
            .toString()
            .replace(baseUrl, '')
            .replace('/api', '');
        },
      },
    },
  },

How can I fix this?

Here is my vercel.json:

{
    "rewrites": [
      {
        "source": "/api/:path*",
        "destination": "https://api.example.org/:path*&appId=${API_KEY}"
      }
    ]
}