如何在VS Code终端启动VS创建的React+ASP.NET Core项目并解决加载问题

云上老周

2026-7-2

解决React+ASP.NET Core项目Vite代理错误与页面加载问题

1. 修正Vite代理配置

打开client文件夹下的vite.config.js（或vite.config.ts），检查并修改代理规则，确保目标地址与server服务的运行地址完全匹配：

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/weatherforecast': {
        target: 'https://localhost:5174', // 必须和server的实际运行地址一致
        changeOrigin: true,
        secure: false // 本地自签HTTPS证书需添加此项，跳过证书验证
      }
    }
  }
})

如果server使用HTTP协议，将target改为http://localhost:5174即可。

2. 验证后端接口路由

检查server项目中的WeatherForecastController.cs，确认路由注解正确：

[ApiController]
[Route("[controller]")] // 确保路由为/weatherforecast，与前端请求路径匹配
public class WeatherForecastController : ControllerBase
{
    // 接口实现代码
}

3. 调整ASP.NET Core服务路由优先级

访问server地址显示前端页面，是因为后端默认托管了前端静态文件。修改Program.cs，让API路由优先于静态文件配置：

var app = builder.Build();

// 先配置API路由
app.MapControllers();

// 开发环境下无需托管前端静态文件（前端由Vite独立服务）
if (!app.Environment.IsDevelopment())
{
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseRouting();
    app.MapFallbackToFile("index.html");
}

修改后，访问https://localhost:5174只会返回API接口内容，不再显示前端页面。

4. 按顺序启动服务并访问

先在server文件夹执行dotnet run，确认控制台输出服务正常运行在https://localhost:5174
再在client文件夹执行npm run dev，访问https://localhost:5173，此时Vite会将/weatherforecast请求代理到后端，页面即可正常加载数据。