配置开发代理与本地联调
本页负责把最小联调推进到“前端本地开发可以稳定工作”的状态。核心目标是把 /api 请求通过 Vite 代理转发到后端宿主，从而避免前端开发时每次都去手工处理跨域。
这篇教程解决什么
- 前端请求怎样代理到后端。
- 为什么本地联调优先用开发代理，而不是直接开放宽泛 CORS。
- 哪些地址和端口应该在教程里固定下来。
前置条件
- 已完成 连接 WebAPI。
- 后端样例已经能在本地启动。
配套代码
- 当前样例：frontend-starter
- 当前样例：fullstack-starter
- 当前关注文件：vite.config.ts
- 当前关注文件：fullstack-starter/api
我们要做的事
- 把
/api请求代理到后端。 - 固定前后端默认开发端口。
- 让本地调试路径稳定、可复用。
操作步骤
- 在 vite.config.ts 中配置开发端口和
/api代理：
export default defineConfig({
server: {
host: "0.0.0.0",
port: 5173,
proxy: {
"/api": "http://localhost:5000"
}
}
});
- 保持前端请求直接调用相对路径，而不是硬编码完整后端 URL：
await fetch("/api/demo/hello");
- 按下面顺序启动联调环境：
dotnet run --project samples/tutorials/backend-starter/src/BackendStarter.Api/BackendStarter.Api.csproj
cd samples/tutorials/frontend-starter
pnpm dev
打开
http://localhost:5173，确认 API 请求通过代理正常返回。如果你后续把前端构建产物同步到宿主托管目录，继续参考 fullstack-starter 里的结构说明。
验证结果
- 前端可以通过
/api/*路径稳定访问后端样例。 - Vite 页面不需要再手工写死完整后端地址。
- 本地联调端口已经固定为“后端 5000 / 前端 5173”这一组默认值。