how to find the error in blazor wabassembly app(very difficult to find the error)

Question

difficulty to find the error in webassembly(client side) blazor

I am calling server side(blazor server app) webapi in client side((blazor webassembly app))

first I create a blazor server app project and then use built in webapi framework for crud operation

when I calling the webapi in client side then very very difficulty to find the error

then I create a blazor webassembly project and then add this below razor page inside pages folder

DisplayEmployeeData.razor

@page "/DisplayEmployeeData"
@using CrudBlazorServerApp.Data
@using System.Net.Http
@inject HttpClient Http

<h3>DisplayEmployeeData</h3>

@if (empList == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class='table'>
        <thead>
            <tr>
                <th>empid</th>
                <th>username</th>
                <th>empaddress</th>
                <th>password</th>
                <th>country</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var emp in empList)
            {
            <tr>
                <td>@emp.empid</td>
                <td>@emp.username</td>
                <td>@emp.empaddress</td>
                <td>@emp.password</td>
                <td>@emp.country</td>

            </tr>
            }
        </tbody>
    </table>
}

@code {
    Emp[] empList;
    protected override async Task OnInitializedAsync() =>
        empList = await Http.GetJsonAsync<Emp[]>("api/emps/"); //**here I put the debugger but emplist give the null**
}

what type error?

my webapi path is wrong?

see my console log very very difficulty to find the error?

Answer 1

The error is about < not being the valid start of a Json response, which indeed it isn't.

You are getting back an HTML page (with error information, probably).

From the text I gather that you created 2 separate projects. That means "api/emps/" cannot be a valid route. Your API and Client are probably running on localhost:xxxx and localhost:yyyy .

When you have fixed that routing you will probably run into a CORS problem, configure it on your server.

Be aware that a basic setup for this is provided when you create a Blazor Webassembly app and check the 'Hosted' box.

---

Try

empList = await Http.GetJsonAsync<Emp[]>("https://localhost:44333/api/emps"); 

and in your server Startup.Configure()

app.UseCors(policy => 
    policy.WithOrigins("https://localhost:44399")  // client address 
    .AllowAnyMethod()
    .WithHeaders(HeaderNames.ContentType));