PAYATHON 2026

React 使用 Vite 本地代理正常，经 Aspire 部署 Azure 后 API 404 怎么解决？

数据小陈

Vite 的开发代理不会随前端构建产物一起部署。按你描述的部署方式，生产环境由后端提供 SPA 静态文件，/api/user 需要由后端路由或生产环境的反向代理处理。如果后端只有 /users，请求就无法匹配。

如果前后端已经位于同一个服务中，通常可以直接统一 API 路由，不需要额外部署反向代理容器。

为什么本地正常，部署后返回 404？

本地请求经过 Vite 开发服务器：

浏览器 → Vite /api/user → 代理及路径重写 → 后端 /users

部署后，按照你描述的静态文件托管方式，请求链路变为：

浏览器 → 后端 /api/user → 没有匹配的端点 → 404

Vite 的 server.proxy 是开发服务器配置。生产环境只提供构建后的静态文件时，这段代理逻辑不会执行。使用 azd up 部署，也不能说明生产环境已配置相同的路径重写。

推荐做法：统一前端请求和后端路由

如果可以调整后端路由，可以让后端直接提供带 /api 前缀的接口，前端始终使用相同的相对路径。

下面用 ASP.NET Core Minimal API 展示路由结构。返回的空数组仅作示例，应替换成现有业务处理：

app.MapGet("/api/users", () => Results.Ok(Array.Empty<object>()));

前端对应请求：

const response = await fetch("/api/users");

if (!response.ok) {
  throw new Error(`Request failed: ${response.status}`);
}

const users = await response.json();

本地仍可通过 Vite 将 /api 请求转发到后端，但要保留路径前缀，让后端实际收到 /api/users。如果现有代理配置会删除 /api，需要同步调整重写规则。

生产环境中，浏览器向提供页面的同一服务请求 /api/users，后端就能直接匹配该端点。

如果后端必须保留 /users

可以根据现有部署约束选择以下方式：

  • 将前端请求改为 /users，并相应调整本地 Vite 代理的匹配规则。
  • 在后端增加 /api/user 或统一后的 /api/users 路由，复用现有业务处理逻辑。
  • 如果必须保留两套不同的路径，在后端或已有入口代理中显式配置路径映射。

如果生产环境需要将请求转发到另一个独立服务，反向代理才涉及跨服务转发。如果接口就在当前后端进程内，直接增加对应路由通常更容易维护。

还要注意，你给出的映射是 /api/user → /users。这里既有 /api 前缀变化，也有 user 到 users 的变化，单纯删除前缀无法完成这个映射。应核对实际的 Vite 重写规则和后端端点拼写。

如何确认修复有效？

先在浏览器 Network 面板确认失败请求的完整 URL，再对照后端实际注册的路由。调整后，确认该 URL 在生产环境中直接返回预期的 API 数据。

如果后端配置了 SPA fallback，还要检查响应的 Content-Type 和内容。未知 API 路径可能被回退到 index.html，即使状态码为 200，也不代表接口正常。有效的 API 请求应命中对应端点，不存在的 API 路径应返回明确的错误。

由于没有提供 Aspire、Vite 或后端路由配置，也没有说明模板版本，无法确定具体需要修改哪一处配置，也无法判断模板是否缺少某项部署设置。生产服务必须显式处理前端实际请求的路径，不能依赖本地 Vite 代理继续生效。

备注：内容仅供参考。