Proxy error: Could not proxy request from localhost:3000 to http://localhost:44381/ (ECONNREFUSED)

I am developing a Single Page Application (SPA) with ReactJS and ASP.NET. I I am trying to execute an HTTP Request to an endpoint from client side code. I used the default ASP.NET SPA template and changed my configuration as shown below.

            fetch(`/items/${id}`).then((response: any) => {
                return response.data;
            })

I modified the default web api template and use a Proxy Server in development instead. Like so:

            app.UseSpa(spa =>
             {
                spa.Options.SourcePath = "Client";

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

When I execute the fetch in React client code, I get this error: Proxy error: Could not proxy request /items/1 from localhost:3000 to http://localhost:44381/ (ECONNREFUSED).

How do I configure my server-side code to proxy the request?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

According to the linked issue on GitHub, the spa.UseReactDevelopmentServer should already setup the proxy server itself as of .Net Core 3.1. So you might not need to be calling the spa.UseProxyToSpaDevelopmentServer yourself manually.

https://github.com/dotnet/AspNetCore.Docs/issues/12008#issuecomment-573453266

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0