Vue app hosted on vercel not hitting the api host on render

Question

I've build a fully functional e-learning application with vue.js. This platform is powered by a RESTfull API build with Node.js/Express. The Frontend is hosted/deployed on vercel while the backend is hosted on render. The platform works well when run on localhost. When the frontend running on localhost access the backend endpoints hosted on render, everything seems to work find. But once i try to access it through the hosted frontend i get CORS error.

For instance this is the code which is incharge of performing a login

export const login = async (data: data) => {
  const logUser = axios({
    method: "post",
    url: "/api/v1/auth/login",
    data,
    params: {
      role: data.role,
    },
  });
  return logUser;
};

My front-end is hosted like on vercel.

When I used the axios baseUrl for all request to be made to that url CORS error was encounter right at development.

So the solution i tried was in my vue.config file I added a devSever with a proxy to my backend API. Like shown below

• vue.config.ts

module.exports = defineConfig({
devServer: {
proxy: "https://my-api-backend.onrender.com",
})

So my intention is for the browser to proxy all request to that API but what i does it it give me a Method Not allowed 405 error. when i try to perform certain operation like login which is a post request to my back-end. It works well on development but has issues on production. It's seem as the request are instead proxied to my front-end were the Vue app is hosted instead of backend

It should be noted that the back-end allows all request to be handle no matter the source.

const app =express()
const cors = required('cors')

app(cors('*'))

CORS has be set to handle all request

What could i be missing.