.NET React SPA中Vite代理在主端口7177无法工作的问题

Vite的proxy配置仅对其自身的开发服务器（端口6363）生效，而.NET主端口7177的请求由Kestrel服务器直接处理，因此需要在.NET项目中添加路径重写规则，将/app/api开头的请求转发到后端API路径。

步骤：修改Program.cs添加URL重写中间件 #

在Program.cs中，找到app.MapControllers()的位置，在它之前添加URL重写配置：

var rewriteOptions = new RewriteOptions()
    .AddRewrite(@"^app/api/(.*)", "api/$1", skipRemainingRules: true);
app.UseRewriter(rewriteOptions);

这段代码会将所有以/app/api/开头的请求，重写为/api/开头的路径。例如：

• 原请求：https://localhost:7177/app/api/publicdata/book
• 重写后：https://localhost:7177/api/publicdata/book

这样Kestrel就能正确将请求路由到你的PublicDataController，返回预期的API数据。

补充说明 #

• 确保你的.NET项目中已经正确配置了静态文件服务和SPA fallback：

  app.UseStaticFiles();
  app.MapFallbackToFile("index.html"); // 用于SPA路由 fallback
  app.MapControllers();
  

• 无需修改Vite的proxy配置，它依然会在Vite开发服务器（6363端口）上正常工作，满足本地开发时的代理需求。

内容的提问来源于stack exchange，提问作者Carrie Kaski