如何让ASP.NET Core React.js JS模板实现TS Redux模板无SPA代理的运行效果

可以实现JS版本React模板和TS Redux模板一致的无独立SPA代理运行效果，两个模板本质是采用了两代不同的ASP.NET Core SPA集成方案：JS模板默认使用后来推出的SpaProxy分离代理方案，TS Redux模板使用的是更早的SpaServices内置中间件集成方案，按以下步骤调整配置即可对齐效果：

1. 调整.csproj项目配置 #

• 删除以下两个SpaProxy专属配置节点：
  • <SpaProxyServerUrl>
  • <SpaProxyLaunchCommand>
• 移除NuGet包引用 Microsoft.AspNetCore.SpaProxy
• 新增NuGet包引用 Microsoft.AspNetCore.SpaServices.Extensions
• 调整静态资源发布规则，将原来的SpaProxy相关发布配置替换为TS模板同款的ClientApp静态资源映射规则，示例如下：

  <ItemGroup>
    <DistFiles Include="ClientApp\build\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
  

2. 调整Startup.cs服务与中间件配置 #

• 在ConfigureServices方法中添加SPA静态文件服务注册：

  services.AddSpaStaticFiles(configuration =>
  {
      configuration.RootPath = "ClientApp/build";
  });
  

• 在Configure方法中，先于UseAuthorization/UseEndpoints节点添加UseSpaStaticFiles中间件，最后添加SPA托管中间件：

  // 原有中间件保持不变，比如UseStaticFiles、UseRouting、UseAuthorization等
  app.UseSpaStaticFiles();
  app.UseEndpoints(endpoints =>
  {
      // 原有接口路由配置保持不变
  });
  app.UseSpa(spa =>
  {
      spa.Options.SourcePath = "ClientApp";
      // 开发环境下自动启动React开发服务器
      if (env.IsDevelopment())
      {
          spa.UseReactDevelopmentServer(npmScript: "start");
      }
  });
  

• 移除所有和SpaProxy相关的中间件配置。

3. 调整前端ClientApp配置 #

• 删除根目录下的setupProxy.js文件，该文件是SpaProxy方案专属的前端请求转发配置，SpaServices方案的转发逻辑由后端中间件统一处理
• 修改package.json中的scripts节点，将start脚本从"start": "rimraf ./build && react-scripts start"改为"start": "react-scripts start"

报错原因说明 #

你之前遇到的代理请求失败报错，是因为配置修改不彻底，残留了SpaProxy的相关配置，或者没有清理编译缓存导致旧配置仍在生效。按以上步骤全量修改完成后，删除项目根目录下的bin、obj文件夹，再重新编译启动即可解决。

TS模板的代理逻辑说明 #

TS Redux模板不是完全没有代理，而是代理逻辑集成在UseReactDevelopmentServer中间件内部：中间件会自动检测并启动React开发服务器，直接在ASP.NET Core进程内完成请求转发，不需要启动独立的SpaProxy Server进程，所以感知不到代理存在。

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