ASP.NET Core - React：无法将请求代理到 http://localhost:3000/，因为对代理目标的请求失败

Question

我正在使用 ASP.NET Core 和 ReactJS 开发一个网站。

开发时，我在运行应用程序的本地计算机上没有遇到任何问题，但是，当尝试在服务器上部署时，使用模板提供的默认 SPA 代码无法正常工作，因为网站给出了以下错误：

HttpRequestException：无法建立连接，因为目标机器主动拒绝。（本地主机：3000）

我已经看到如果使用可以解决该错误，spa.UseProxyToSpaDevelopmentServer("http://localhost:xxxx/")但它不起作用。

我的Startup.cs样子如下：

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors();

        services.AddDbContext<ApplicationDbContext>(options =>
        {
            options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"));
        });

        //services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
        //    .AddEntityFrameworkStores<ApplicationDbContext>();

        services.AddIdentity<ApplicationUser, IdentityRole>()
            .AddRoleManager<RoleManager<IdentityRole>>()
            .AddDefaultUI()
            .AddDefaultTokenProviders()
            .AddEntityFrameworkStores<ApplicationDbContext>();

        services.AddIdentityServer()
            .AddApiAuthorization<ApplicationUser, ApplicationDbContext>();

        services.AddAuthentication()
            .AddIdentityServerJwt();

        services.AddControllersWithViews();
        services.AddRazorPages();

        // In production, the React files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "rx3-front/build";
        });

        services.Configure<StripeSettings>(Configuration.GetSection("Stripe"));
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IServiceProvider serviceProvider)
    {
        StripeConfiguration.ApiKey = (Configuration.GetSection("Stripe")["SecretKey"]);

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseDatabaseErrorPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseCors(builder => builder
            .AllowAnyHeader()
            .AllowAnyMethod()
            .SetIsOriginAllowed((host) => true)
            .AllowCredentials()
        );

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseRouting();

        app.UseAuthentication();
        app.UseIdentityServer();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller}/{action=Index}/{id?}");
            endpoints.MapRazorPages();
        });

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

            if (env.IsDevelopment())
            {
                spa.UseReactDevelopmentServer(npmScript: "start");
                //spa.UseProxyToSpaDevelopmentServer("http://localhost:3000/");
            }
        });

        //Custom method for initializing the database Roles and setting an unique Admin User
        CreateRoles(serviceProvider).GetAwaiter().GetResult();
    }
}

我认为还值得强调的是，在任何部署之前，我确实运行了npm run build，因此它确实为相应的发布生成了捆绑包，以防万一它做了什么，但话又说回来，它除了让我头疼之外没有什么不同。

有什么线索可以让我开始解决这个问题吗？

Answer 1

在创建一个新项目进行比较并逐行读取时，我偶然发现了导致*.csproj file错误的一个微小更改，其中更改 SpaRoot 标记值需要在新值末尾添加 \ 。

Project1.csproj:

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
     <!-- Please note that at the end of ClientApp (being the name of the folder for the front-end) there's a backwards slash  -->
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>

一个简单的错字，但幸运的是仅此而已。