Vite react proxy sends requests to different endpoints depending on current location

Question

After switch to vite, I am trying to mimic proxy: "http://localhost:5000" which I previously used in package.json

Here is my vite config

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

I have react app running on port 3000. When I send a request in the root url (http://localhost:3000) everything works fine

const { data } = await axios.get("api/user/me");

Well, not really fine. Even though proper data is returned in response, in the console request gets sent to http://localhost:3000/api/user/me instead of http://localhost:5000/api/user/me. Can anyone explain this behaviour?

The main problem is that when I navigate to another page (e.g. http://localhost:3000/dashboard), then the same request gets sent to http://localhost:3000/dashboard/api/user/me.

What am I doing wrong? I want to send requests to http://localhost:5000, no matter the location

I found a workaround by specifying FE url before every request const { data } = await axios.get("http://localhost:3000/api/user/me");, but still is there a way to mimic package.json proxy behaviour?

For your main problem of running the code on a dashboard url or somewhere else, just use an absolute path: `axios.get("/api/user/me")`. — Bergi, May 18 '22 at 23:32
"*in the console request gets sent to `http://localhost:3000/api/user/me`*" - that sounds normal: that's the current origin. I don't know vite, but if that is a **server** configuration, I'd expect the *server* that runs at `localhost:3000` to proxy the request - the client doesn't care. — Bergi, May 18 '22 at 23:35

score 2 · Answer 1 · answered May 18 '22 at 23:38

2

I resolved the issue by changing axios defaults

axios.defaults.baseURL = `http://localhost:5000`

By doing this I achieved what I was going for. Requests get sent to the proper endpoint no matter the location

answered May 18 '22 at 23:38

pakut2

500
5
21

1

Where do I add this? First time user of VITE – flashc5 Mar 24 '23 at 21:06
I suggest the top-level component (App.tsx | jsx), so that this change takes affect before other components are rendered – pakut2 Mar 25 '23 at 09:42

score -1 · Answer 2 · edited Jan 31 '23 at 04:15

-1

I solved this problem by using Axios.

Create a new file. I called mine emailApi.

Setup your axios, like so:

export const emailApi = axios.create({baseURL: "http://localhost:<yourPortNumber>"})

Done! Whenever you want to send a request to your server, import the emailApi and you're good.

Also in your server, make sure to install cors and set it as a middleware, like so:

express().use(cors({origin: <viteLocalServer>}))

edited Jan 31 '23 at 04:15

tdy

36,675
19
86
83

answered Jan 29 '23 at 17:06

Floratoby

34
2

How is this different to the answer OP already posted almost a year ago? Also, if you're using a reverse-proxy, you don't need CORS – Phil Jan 31 '23 at 04:18

Vite react proxy sends requests to different endpoints depending on current location

2 Answers2