Blazor - WASM : Failed to load resource: the server responded with a status of 404 (Not Found)

Question

I am getting below error, code is not able to find Controller and its methods. I am trying to add user to database from create user component.

Failed to load resource: the server responded with a status of 404 (Not Found)

Visual Studio 2019 Preview. Client - Target Framework : .Net Standard 2.1 Server - Target Framework : .Net Core 3.1 Shared - Target Framework : .Net Standard 2.1

dotnet --version 3.1.200 ///Preview version

Controller Code

[Route("api/[controller]")]
[ApiController]
public class UserInfoController : ControllerBase
{
    private readonly ApplicationDbContext dbContext;

    public UserInfoController(ApplicationDbContext dbContext)
    {
        this.dbContext = dbContext;
    }

    [HttpPost]
    public async Task<ActionResult<int>> Post(UserInfo user)
    {
        //some code here to add user to db
    }
}

Component Code

    private async Task AddUser()
    {
        Console.WriteLine("Add user method");
        try
        {
            await userService.CreateUser(_user);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex.Message);
        }
    }

User Service

public class UserServices : IUserInfo
{
    private readonly IHttpService httpService;
    private string url = "api/userinfo"; //Controller

    public UserServices(IHttpService httpService)
    {
        this.httpService = httpService;
    }

    public async Task CreateUser(UserInfo user)
    {
        var response = await httpService.Post(url, user);
    }
}

Thanks for help.

Answer 1

Thanks Ericgrantholland & Xing Zou for your help.

After long time analysis I found that need to make two changes for it to work.

1. Set Server as you Startup project.... as highlighted in Screenshot.Earlier it was setup as Client as startup project.

2. Adding below line in startup.cs file.

   endpoints.MapDefaultControllerRoute();

Now the endpoint code looks like below

 app.UseEndpoints(endpoints =>
        {

            //ZS new line added
            endpoints.MapDefaultControllerRoute();

            //Original code
            endpoints.MapControllers();                
            endpoints.MapFallbackToFile("index.html");

        });

After doing these changes I was successfully able to call the controller api.

Thanks

Answer 2

I think you should be using the HttpClient instead of IHttpService. Try injecting the client in your component by adding the following code to the top of your component page.

@inject HttpClient http

Then instead of calling your service, call

await http.PostJsonAsync(“api/user info”,_user);

If that works, the next step would be to change your service to inject an HttpClient into your service vs an IHttpService. Then you should be able to call the service directly instead of HttpClient.

Answer 3

If anyone else runs into this, this is what fixed mine, as strange as it sounds. I went into the bin folder, and saw that blazor.webassembly.js was a hidden file. Unhid it, and then everything worked.