React与ASP.NET Core整合问题：API请求被React拦截如何解决？

1. 解决UseSpa扩展方法找不到的问题 #

• 问题根源：UseSpa方法并非来自Microsoft.AspNetCore.SpaProxy包，核心实现由Microsoft.AspNetCore.SpaServices.Extensions提供。
• 解决步骤：
  • 确保已安装Microsoft.AspNetCore.SpaServices.Extensions NuGet包（无需单独依赖SpaProxy，该包已包含必要的SPA代理能力）
  • 代码中引入正确命名空间：using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;（该命名空间同时提供UseReactDevelopmentServer方法，UseSpa则依赖基础的Microsoft.AspNetCore.Builder命名空间）

2. 解决GET请求/api/submit被React服务器拦截的问题 #

• 问题根源：中间件执行顺序错误。UseSpa中间件会捕获所有未被前置中间件匹配的请求，并转发到React开发服务器。若API路由配置在UseSpa之后，接口请求会被Spa中间件拦截，无法到达后端路由逻辑。
• 解决步骤：
  • 调整中间件顺序：先配置所有API路由，再调用UseSpa，确保接口请求优先匹配后端逻辑
  • 修正后的完整代码：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// 先配置API路由，确保请求优先匹配后端接口
app.MapGet("/api/submit", () => "Submit");
app.MapPost("/api/submit", () => "Submit");

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "../giftbox-front";

    if (app.Environment.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

app.Run();

• 额外说明：生产环境部署时，React构建后的静态文件由Spa中间件托管，此时API路由仍需放在UseSpa之前，避免接口请求被静态文件托管逻辑拦截。

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