CODEWITHSUNDEEP
blazorblazor-webassembly
J.G.Sable
J.G.Sable

Reputation: 1408

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?

Upvotes: 8

Views: 16418

Answers (5)

rahim jangi
rahim jangi

Reputation: 1

Add ToString() to communityId

$"api/communities/GetCommunity/" + communityId.ToString()

Upvotes: 0

Ali Borjian
Ali Borjian

Reputation: 1108

check your request and route address

in your API Controller if it is like

  [Route("api/[controller]")]

Then in your request (in wasm) it must be like

        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("api/WeatherForecast");

Upvotes: 0

Gerry An
Gerry An

Reputation: 1

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

Upvotes: -1

Henk Holterman
Henk Holterman

Reputation: 273824

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.

Upvotes: 8

Yann
Yann

Reputation: 553

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.

Upvotes: 21

Related Questions