开发代理在React vite中不起作用

Question

我试图在 vercel 或 netlify 中部署我的 vite React 应用程序。我在渲染中托管了它的后端部分，现在后端正在工作，但是当我在前端托管时，请求 URL 更改为托管 URL，因为我使用 vite 代理来使用快捷方式 URL，但它在开发中不起作用，

我的 vite 配置示例

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    VitePWA(manifestForPlugin),
    react(),
  ],
  server: {
    proxy: {
      "/api": {
        target: "https://sample__.onrender.com",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace("/api", ""),
      },
    },
  },
  build: {
    proxy: {
      "/api": {
        target: "https://sample__.onrender.com/", 
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace("/api", ""),
      }
    }
  }
});

所以当我调用 api 时，我的 url 是这样的：

api/auth/login/

所以在本地主机中，它将变成，

localhost:8000/auth/login/

但是当我从 netlify 或 vercel 的开发服务器上做到这一点时，它变得像

vercel/netlify url/api/auth/login/

在本地主机中，我的后端正在 8000 中运行，前端正在 5173 中运行

Answer 1

问题似乎出在您在 Vite 配置中设置代理的方式，以及前端应用程序如何在不同环境中处理这些代理 API 请求。

以下是您可以修改 Vite 配置以更一致地处理 API 代理的方法：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    VitePWA(manifestForPlugin),
    react(),
  ],
  server: {
    proxy: {
      '/api': {
        target: 'https://sample__.onrender.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
});

确保前端代码中的 API 调用是相对于 /api 路径的：

// Example of an API call in your frontend code
fetch('/api/auth/login', {
  // other fetch options
})
  .then((response) => {
    // handle response
  })
  .catch((error) => {
    // handle error
  });

此设置应在不同环境中一致工作。但是，请记住，当您部署到 Vercel 或 Netlify 等平台时，可能需要调整后端 URL 的环境变量或设置，以确保前端和后端之间的正确通信。

部署到不同环境时，您可能需要根据当前环境动态设置后端URL。这可能涉及在每个环境的构建过程中使用环境变量或配置后端 URL。