ASP.NET Core - React: Failed to proxy the request to http://localhost:3000/, because the request to the proxy target failed

Question

I'm developing a website using both ASP.NET Core and ReactJS.

When developing I haven't had any issue with the local machine running the app, nevertheless, when trying to deploy on a server, using the default SPA code that the template provides isn't working correctly since the website gives me the following error:

HttpRequestException: No connection could be made because the target machine actively refused it. (localhost:3000)

I have seen that the error could be solved if using spa.UseProxyToSpaDevelopmentServer("http://localhost:xxxx/") but it didn't work.

My Startup.cs looks as follows:

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();
    }
}

I think it is also worth to highlight that before any deployment, I did run npm run build so it does make the bundle for the corresponding publish, just in case it did something but then again it did nothing different than giving me a headache.

Any lead where I can start working this around?

Answer 1

Upon creating a new project for comparison and reading line by line, I stumbled upon a tiny change made in the *.csproj file that caused the error, where changing the SpaRoot tag value, required a \ at the end of the new value.

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>

A simple typo but thankfully it was only that.