405 Method Not Allowed In vercel

Question

Title: Vite Proxy Not Working When Making API Calls to Node.js Backend Hosted on Render

Body:

I have a React.js application set up with Vite and hosted on Vercel. I'm encountering a problem where the proxy set in the Vite configuration is not working for API calls. Direct Axios requests to the hardcoded backend URL work correctly, so the server is responding as expected when not using the proxy.

Could anyone help me fix the proxy setup so I don't have to hardcode the server URL in production? Here are the details:

Frontend (React + Vite) configuration:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://myapp-backend.onrender.com',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

In my component, I'm attempting to make a POST request like this:

import axios from 'axios';

axios.post('/api/data', { key: 'value' })
  .then(response => console.log(response))
  .catch(error => console.error(error));

Backend (Node.js/Express) hosted on Render:

The backend serves routes under /api. For example, /api/data.

Here's how CORS is set up on the backend:

const cors = require('cors');

app.use(cors({
  origin: 'https://myapp-frontend.vercel.app',
  credentials: true
}));

Expected behavior: The expected behavior is that the API call /api/data should be correctly routed to https://myapp-backend.onrender.com/api/data without the need to specify the full URL in the frontend Axios call.

Actual behavior: The calls do not seem to be proxied. If I directly use the full URL in an Axios request, it works, indicating the backend is functional and CORS settings are correctly configured.

Error messages: There are no specific error messages other than the status code returning 405 Method Not Allowed in chrome dev tools network tab.

Question: How can I configure Vite’s proxy to correctly handle requests in my production setup? Are there any common issues with this proxy setup that might cause it to fail?

Answer 1

This should solve the problem for those having issues with the solution working locally but not on VERCEL / NETLIFY

If your app is on VERCEL, edit your .vercel.json file to include the code below. Please take note of the word proxy because it's a reserved keyword. cc: https://vercel.com/docs/projects/project-configuration#rewrites

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/proxy": {
        target: "https://example.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/proxy/, '')
      },
    },
  }
})

.vercel.json

{  
  "rewrites": [
       { "source": "/proxy/:match*",
         "destination": "https://example.com/:match*"
       } 
 ]
}

If your app is on NETLIFY, edit your _redirects file to include the code below. Please take note of the word :splat because it's a reserved keyword. cc: https://docs.netlify.com/routing/redirects/rewrites-proxies/#shadowing

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "https://example.com",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      },
    },
  }
})https://vitejs.dev/config/

_redirects /api/* https://api.example.com/:splat 200