Vite React代理根据当前位置将请求发送到不同的端点

Question

切换到 vite 后，我尝试模仿proxy: "http://localhost:5000"我之前使用的package.json

这是我的 vite 配置

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

我有在端口 3000 上运行的 React 应用程序。当我在根 url ( ) 中发送请求时，http://localhost:3000一切正常

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

• 嗯，不太好。尽管响应中返回了正确的数据，但在控制台中，请求被发送到http://localhost:3000/api/user/me而不是http://localhost:5000/api/user/me. 谁能解释这种行为？

主要问题是，当我导航到另一个页面（例如http://localhost:3000/dashboard）时，相同的请求会发送到http://localhost:3000/dashboard/api/user/me.

我究竟做错了什么？我想将请求发送至http://localhost:5000，无论位置如何

我找到了一个解决方法，在每个请求之前指定 FE url const { data } = await axios.get("http://localhost:3000/api/user/me");，但仍然有办法模仿package.json代理行为吗？

Answer 1

我通过更改 axios 默认值解决了该问题

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

通过这样做，我实现了我想要的目标。无论位置如何，请求都会发送到正确的端点