'Unhandled exception rendering component: '<' is an invalid start of a value for Blazor WASM

I have an API endpoint which allows anonymous. I have confirmed in Postman it is working for anonymous and authenticated users and returning proper JSON.

Because the endpoint can be called anonymously, in my Blazor WASM http Service, I have constructed the following, one request to send without a token, one request to send with a token.

private readonly HttpClient httpClient;
private readonly IHttpClientFactory httpClientFactory;
private readonly HttpClient anonHttp;

public CommunityHttpService(HttpClient httpClient, IHttpClientFactory httpClientFactory)
{
   if (httpClient == null) throw new ArgumentNullException("Http is null.");
   this.httpClient = httpClient;
   this.httpClientFactory = httpClientFactory;
   anonHttp = httpClientFactory.CreateClient("AnonAPI");
}

public async Task<HttpResponseMessage> GetCommunity(Guid communityId, bool userIsAuthenticated)
{
    if (!userIsAuthenticated)
    {
       // make anonymous api call without bearer token to avoid error
       return await anonHttp.GetAsync($"api/communities/GetCommunity/" + communityId);
    }
    else
    {
       return await httpClient.GetAsync($"api/communities/GetCommunity/" + communityId);
     }
}

I declare the Community in my component.

private CommunityDto Community { get; set; } = new CommunityDto();

in my OnInitializedAsync method of the component, I have the following:

if (!string.IsNullOrEmpty(CommunityId.ToString()))
{
    var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
    var user = authState.User;
    HttpResponseMessage apiResponse;
    if (user.Identity.IsAuthenticated)
    {
       apiResponse = await CommunityService.GetCommunity(CommunityId, true);
    }
    else
    {
      apiResponse = await CommunityService.GetCommunity(CommunityId, false);
    }

    if (apiResponse.IsSuccessStatusCode)
    {
        Community = await apiResponse.Content.ReadFromJsonAsync<CommunityDto>();
    }
}

All the html is:

<span>@CommunityId</span>

Setting breakpoints seems to be useless, but I don't know what could be causing this error in the console. Any ideas?

blazor blazor-webassembly

Solution 1:^[1]

It's because you are running the blazor xxxx.Client project instead of the xxxx.Server one.

In first case, var forecasts = await _http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast"); Will go somewhere in "local" client projet, which is BalzorWASM pwa, so this resource is nothing foundable, so you get probably an html error page 'Sorry, there's nothing at this address.'.

In second case, var forecasts = await _http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast"); applies on the server part, and there, you have your controler ok.

In first place, browsing WeatherForecast will get you to "sorry, there's nothing to this adress" page, In second, you'll se WeatherForecast controller response.

This is why it says it cannot deserialize content starting with '<' which is actually tag.

Solution 2:^[2]

The error is saying that the opening tag <html> is not valid JSon.

It means that "api/communities/GetCommunity/" is incorrect. Or the BaseAddress as configured in Program.cs .

Use the Dev tools, Network tab to see what URL is being used an compare that to what you used in PostMan.

Due to the routing in a Blazor Wasm app you will not get a 404 back from your API but you will get the 'nothing here' Blazor fallback page instead.

Solution 3:^[3]

I encounter this error also. This is caused by incorrect basedAddress. I fixed it by adding 'api' in the baseAddress configuration inside Program.cs.

See image below: Program.cs

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Dharman
Solution 2
Solution 3	Gerry An

'Unhandled exception rendering component: '<' is an invalid start of a value for Blazor WASM

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]