[BUG] Getting CORS error in dev login.

[basuri01]

Browser

Chrome

Area

Auth (login / Google sign-in)

Steps to reproduce

Start the server on any frontend port other than 5173.

Expected behavior

The application should work on any frontend port.

What actually happened

While setting up the project, I was facing CORS error in dev login.

This happened because vite picked up some other port than 5173, which is hardcoded in the backend for course.

This can be solved by setting up a backend proxy in vite.config.js:

export default defineConfig({
  plugins: [react()],},
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
});

Logs / Screenshots

[Harshbansal06]

Hi @basuri01 ! I would love to work on this issue.

The Vite proxy approach is nice way to fix the backend URL problem. I noticed there was a small typo in the issue description's snippet, so I'll make sure to correct it like this:

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
      },
    },
  },
});

[AniketSingh16742]

Hey @basuri01 I would like to work on this issue, I will resolve that hardcoded part in backend by setting up a backend proxy in vite.config.js as you mentioned above.

[prateek-shanbhag]

Hi @basuri01,

I'd like to work on this issue.

From the description, it looks like the CORS error occurs when Vite runs on a port other than "5173". I'll first reproduce the issue, then set up and verify the Vite proxy solution so the login flow works regardless of the frontend port.

I'll also test both regular login and Google Sign-In to make sure everything works as expected.

Please assign this issue to me.
Thanks

[prashant273000]

Hello @basuri01

I would like to work on this issue. This is happening because the PORT logic is hardcoded in the backend as you mentioned. I will make sure to set up the proxy in the vite config file.
Hoping this issue gets assigned to me.

Thank you.

[ethnic17]

Hey @basuri01. I would like to solve this issue. By setting up Vite proxy, the frontend will send all the requests with "/api" to backend at port 3000. But right now, if we look at frontend/src/lib/api.js, all the api calls are done using helper function which fetches `${BASE}/api/v1${path} and const BASE = import.meta.env.VITE_API_URL || 'http://localhost:3000';
So, the requests are sent directly to backend and the proxy is getting ignored leading to CORS. To solve it, we would have to change hardcoded localhost to '' because vite proxy only takes generalized api calls (with no base). Also, we would have to make VITE_API_URL env variable empty.
I think this is the problem and the solution. Please assign it to me.

[PixelKnightDev]

since @basuri01 found the bug im going to assign her.
everyone else feel free to go through the codebase and report any other bugs that you find!