ERR_CONNECTION_REFUSED got by fetch data with ReactJS && ASP.NET - asp.net

Question

Hi I am working on a class group project and I am responsible for the front-end part. I am a rookie in front-end so I may have made stupid mistakes.
After I got codes in back-end from my partner:
[ApiController]
public class AccountController : ControllerBase
{
public IDBManager_Users _usersManager;
public AccountController(IDBManager_Users usersManager)
{
_usersManager = usersManager;
}
[HttpPost]
[Route("Account/Create")]
public bool CreateUser(User user)
{
bool created = _usersManager.CreateUser(user);
return created;
}
And I put a fetching data request in React to create a user:
register= e => {
e.preventDefault();
fetch(`http://localhost:5001/Account/Create`, {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
email: this.state.email,
password: this.state.password,
userRole: this.state.userRole,
country: this.state.country,
place: this.state.place,
city: this.state.city
})
})
.then((response) => {
if(response){
this.props.history.push('/login')
}
else{
alert('Please Register with Correct Info!');
}
})
.catch(err => console.log(err));
};
I think all other parts go well and I can get my request payload from Chrome like:
{"email":"abc#gmail.com","password":"abc","userRole":"1","country":"United States","place":"NY","city":"whatever"}
but fail with:
POST http://localhost:5001/Account/Create net::ERR_CONNECTION_REFUSED
I do not know what kind of stupid I have made but I really struggled into it.
Waiting for reponse :)
Edit1: If you want to have a look of startup.cs, I have attach it here:
{
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.Add(new ServiceDescriptor(typeof(SqlManager), new SqlManager(Configuration.GetConnectionString("DefaultConnection"))));
services.AddControllersWithViews();
services.AddCors(options =>
{
options.AddPolicy("AllowAllHeaders",
builder =>
{
builder.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod();
});
});
// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/build";
});
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
});
app.UseCors("AllowAllHeaders");
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
}
}

Answer 1

You need to change your method signature to map the JSON from the body of the request to the actual DTO object using the FromBody annotation:
public bool CreateUser([FromBody] User user)
Please note that since you didn't provided the code from the Startup.cs I have no idea if something else is missing there in regards of the routing and authorization.
Ref: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-3.1#frombody-attribute