Blazor Wasm Asp.net Core hosted WebApi not consumed by Blazor Server

Question

Blazor Wasm Asp.net Core hosted WebApi not consumed by Blazor Server

Prathamesh Shende 441

Hi,
I have two project one is Blazor wasm with asp.net core hosted and another is blazor server.
Blazor wasm asp.net core webapi is public and I am consuming those into blazor Server project.
From last 7 days it's not consumed by blazor server project.

I test in local machine it working fine. After publish to server the blazor server project throwing 500 error.

another thing, if Blazor Wasm project consume this api then it's working correct. So I want to ask there any issue or setting that changed to consume api in blazor server from blazor wasm asp.net core hosted?

getting this error
It's not a cors error.

[2023-08-02 17:43:19.285 +05:30  EROR]
 HTTP GET / responded 500 in 470.0784 ms
System.Net.Http.HttpRequestException: Response status code does not indicate success: 500 (Server Error).
   at System.Net.Http.HttpResponseMessage.EnsureSuccessStatusCode()
   at System.Net.Http.Json.HttpClientJsonExtensions.GetFromJsonAsyncCore[T](Task`1 taskResponse, JsonSerializerOptions options, CancellationToken cancellationToken)
   at InnovusServer.Services.WorksService.Get() in D:\Projects\Innovus\Services\WorksService.cs:line 18
   at InnovusServer.Pages.Index.OnInitializedAsync() in D:\Projects\Innovus\Pages\Index.razor:line 333
   at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.HandleExceptionViaErrorBoundary(Exception error, ComponentState errorSourceOrNull)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.<WaitForQuiescence>g__ProcessAsynchronousWork|48_0()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.WaitForQuiescence()
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderRootComponentAsync(Int32 componentId, ParameterView initialParameters)
   at Microsoft.AspNetCore.Components.Rendering.HtmlRenderer.RenderComponentAsync(Type componentType, ParameterView initialParameters)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.<>c__11`1.<<InvokeAsync>b__11_0>d.MoveNext()
--- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Mvc.ViewFeatures.StaticComponentRenderer.PrerenderComponentAsync(ParameterView parameters, HttpContext httpContext, Type componentType)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.PrerenderedServerComponentAsync(HttpContext context, ServerComponentInvocationSequence invocationId, Type type, ParameterView parametersCollection)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ComponentRenderer.RenderComponentAsync(ViewContext viewContext, Type componentType, RenderMode renderMode, Object parameters)
   at Microsoft.AspNetCore.Mvc.TagHelpers.ComponentTagHelper.ProcessAsync(TagHelperContext context, TagHelperOutput output)
   at Microsoft.AspNetCore.Razor.Runtime.TagHelpers.TagHelperRunner.<RunAsync>g__Awaited|0_0(Task task, TagHelperExecutionContext executionContext, Int32 i, Int32 count)
   at InnovusServer.Pages.Pages__Host.ExecuteAsync() in D:\Projects\Innovus\Pages\_Host.cshtml:line 8
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageCoreAsync(IRazorPage page, ViewContext context)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderPageAsync(IRazorPage page, ViewContext context, Boolean invokeViewStarts)
   at Microsoft.AspNetCore.Mvc.Razor.RazorView.RenderAsync(ViewContext context)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.ViewFeatures.ViewExecutor.ExecuteAsync(ViewContext viewContext, String contentType, Nullable`1 statusCode)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResultFilterAsync>g__Awaited|30_0[TFilter,TFilterAsync](ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResultExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.ResultNext[TFilter,TFilterAsync](State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeResultFilters>g__Awaited|28_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeFilterPipelineAsync>g__Awaited|20_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
   at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Awaited|17_0(ResourceInvoker invoker, Task task, IDisposable scope)
   at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|6_0(Endpoint endpoint, Task requestTask, ILogger logger)
   at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
   at Serilog.AspNetCore.RequestLoggingMiddleware.Invoke(HttpContext httpContext)

AgaveJoe 1,510 Reputation points

2023-08-02T12:32:41.8566667+00:00

A 500 error means the server experiences an unrecoverable error. do basic troubleshooting to find the bug.

Use PostMan or the browser to do an HTTP GET to the same URL that causes the error. If PostMan and/or the browser produce the same error then there is probably a configuration bug. If PostMan and/or the browser returns a 200 Ok then there is a most likely a problem bug in the code.

Other things to consider.... Add a try...catch if one does not exist. Review the EventViewer for errors. Enable logging.
Prathamesh Shende 441 Reputation points

2023-08-02T15:37:28.0066667+00:00

The same api consumed and working in another blazor wasm project. but its not working any new blazor server project. Postman showing 200ok. Browser showing 200ok. I am sure there is issue with blazor server projects where It will stop consuming the api from blazor wasm asp.net core webapi
AgaveJoe 1,510 Reputation points

2023-08-02T16:12:10.2866667+00:00

I am sure there is issue with blazor server projects where It will stop consuming the api from blazor wasm asp.net core webapi

The first step in debugging is reproducing the error. I created a test and have no problems calling Web API in a hosted Blazor WASM from Blazor Server.

If you want community debugging support then share sample code that reproduces this issue. Have you tried reviewing the Event Viewer, adding error handling, and logging as suggested?

Prathamesh Shende 441

here the code -
blazor server

public async ValueTask<List<Work>?> Get() =>
        await _httpClient.GetFromJsonAsync<List<Work>>($"https://www.example.com/api/works");

public class Work
{
        public int ID { get; set; }
    [Required]
    [StringLength(100)]
    public string? Name { get; set; }
    [Required]
    [StringLength(250)]
    public string? Title { get; set; }
}

Index.razor
@code
{
    List<Work>? works = new();
    protected override async Task OnInitializedAsync()
    {
        works = await WorksService.Get(); //show error here that I mentioned before
    }
}

blazor wasm asp.net core webapi

[HttpGet]
    public async ValueTask<ActionResult<IEnumerable<Work>?>> GetWork(CancellationToken cancellationToken)
    {
        return await _context.Work.OrderByDescending(a => a.ID).Select(w => new Work
        {
            ID = w.ID,
            Name = w.Name,            
        }).AsNoTracking().ToListAsync(cancellationToken);
    }
this works fine in browser and postman. 
I have serilog to check logs

Prathamesh Shende 441 Reputation points

2023-08-02T17:01:26.3533333+00:00

https://cms.innovustech.in/api/works this is api want to consume in blazor server project
Prathamesh Shende 441 Reputation points

2023-08-02T17:03:52.5333333+00:00

if cors error use
debug on this url - https://localhost:44382
AgaveJoe 1,510 Reputation points

2023-08-02T19:27:06.1166667+00:00

The API URL you provided does not match the Work type or the GetWork response. I added an Id to the URL it returns a single item but the code you shared does not accept an Id or filter the results by ID.

So there's stuff going on with your site that you have not told us about. For example, change route parameter using a browser the site redirects to entirely different site.
Prathamesh Shende 441 Reputation points

2023-08-03T02:35:58.84+00:00
public async ValueTask<List<Work>?> Get() => await _httpClient.GetFromJsonAsync<List<Work>>($"https://cms.innovustech.in/api/works");

500 Error only show in blazor server project not in blazor wasm project. I use this same code in both projects.
Anonymous

2023-08-03T03:23:06.3233333+00:00

The issue seems related to the API, try to directly access it, it will show the 500 error:
Prathamesh Shende 441 Reputation points

2023-08-03T03:45:56.23+00:00

I was making some changes. you can check again.
try it to consume in blazor server project.
Prathamesh Shende 441 Reputation points

2023-08-03T05:10:10.0366667+00:00

Thank you so much to everyone for putting your efforts in to understand my issue about Api call in Blazor server. I know it is getting so long and some communication and understanding gaps between in this threads. So I have created one repository of both Blazor project and use same URL to not get any CORS Error.

Please fetch this git repository and check on your system is working or not. I am really getting devastated due to this issue.

https://github.com/imprathamesh/BlazorWasmAndServer.git

Hope this will put us all on one page.

Accepted answer

1 additional answer

Your answer

AgaveJoe 1,510 Reputation points

2023-08-02T12:32:41.8566667+00:00

A 500 error means the server experiences an unrecoverable error. do basic troubleshooting to find the bug.

Use PostMan or the browser to do an HTTP GET to the same URL that causes the error. If PostMan and/or the browser produce the same error then there is probably a configuration bug. If PostMan and/or the browser returns a 200 Ok then there is a most likely a problem bug in the code.

Other things to consider.... Add a try...catch if one does not exist. Review the EventViewer for errors. Enable logging.
Prathamesh Shende 441 Reputation points

2023-08-02T15:37:28.0066667+00:00

The same api consumed and working in another blazor wasm project. but its not working any new blazor server project. Postman showing 200ok. Browser showing 200ok. I am sure there is issue with blazor server projects where It will stop consuming the api from blazor wasm asp.net core webapi
AgaveJoe 1,510 Reputation points

2023-08-02T16:12:10.2866667+00:00

I am sure there is issue with blazor server projects where It will stop consuming the api from blazor wasm asp.net core webapi

The first step in debugging is reproducing the error. I created a test and have no problems calling Web API in a hosted Blazor WASM from Blazor Server.

If you want community debugging support then share sample code that reproduces this issue. Have you tried reviewing the Event Viewer, adding error handling, and logging as suggested?
Prathamesh Shende 441 Reputation points

2023-08-02T16:40:28.4433333+00:00

here the code -
blazor server

public async ValueTask<List<Work>?> Get() => await _httpClient.GetFromJsonAsync<List<Work>>($"https://www.example.com/api/works");

public class Work { public int ID { get; set; } [Required] [StringLength(100)] public string? Name { get; set; } [Required] [StringLength(250)] public string? Title { get; set; } }

Index.razor @code { List<Work>? works = new(); protected override async Task OnInitializedAsync() { works = await WorksService.Get(); //show error here that I mentioned before } }

blazor wasm asp.net core webapi

[HttpGet] public async ValueTask<ActionResult<IEnumerable<Work>?>> GetWork(CancellationToken cancellationToken) { return await _context.Work.OrderByDescending(a => a.ID).Select(w => new Work { ID = w.ID, Name = w.Name, }).AsNoTracking().ToListAsync(cancellationToken); } this works fine in browser and postman. I have serilog to check logs
Prathamesh Shende 441 Reputation points

2023-08-02T17:01:26.3533333+00:00

https://cms.innovustech.in/api/works this is api want to consume in blazor server project
Prathamesh Shende 441 Reputation points

2023-08-02T17:03:52.5333333+00:00

if cors error use
debug on this url - https://localhost:44382
AgaveJoe 1,510 Reputation points

2023-08-02T19:27:06.1166667+00:00

The API URL you provided does not match the Work type or the GetWork response. I added an Id to the URL it returns a single item but the code you shared does not accept an Id or filter the results by ID.

So there's stuff going on with your site that you have not told us about. For example, change route parameter using a browser the site redirects to entirely different site.
Prathamesh Shende 441 Reputation points

2023-08-03T02:35:58.84+00:00

public async ValueTask<List<Work>?> Get() => await _httpClient.GetFromJsonAsync<List<Work>>($"https://cms.innovustech.in/api/works");

500 Error only show in blazor server project not in blazor wasm project. I use this same code in both projects.
Anonymous

2023-08-03T03:23:06.3233333+00:00

The issue seems related to the API, try to directly access it, it will show the 500 error:
Prathamesh Shende 441 Reputation points

2023-08-03T03:45:56.23+00:00

I was making some changes. you can check again.
try it to consume in blazor server project.
Prathamesh Shende 441 Reputation points

2023-08-03T05:10:10.0366667+00:00

Thank you so much to everyone for putting your efforts in to understand my issue about Api call in Blazor server. I know it is getting so long and some communication and understanding gaps between in this threads. So I have created one repository of both Blazor project and use same URL to not get any CORS Error.

Please fetch this git repository and check on your system is working or not. I am really getting devastated due to this issue.

https://github.com/imprathamesh/BlazorWasmAndServer.git

Hope this will put us all on one page.

Answer 1

Hi @Prathamesh Shende

About the 500 error in Blazor server application, if we use Fiddler to check request, we can see that:

when access the API from the Blazor WebAssemably or directly access it from browser/postman, the request as below:

success

When access the API via Blazor server application, the request like this:

User's image

From the above screenshot, we can see that when send request from Blazor Server, the request header almost empty, no User-Agent and so on. So, it will return 500 error.

To solve this problem, you can add the request header by yourself. refer to the following code:

In the _Host.cshtml page, add the following script to get the user agent:

    <script>
        window.getUserAgent = () => {
            return navigator.userAgent;
        };
    </script>

Index.razor:

@page "/"
@inject HttpClient _httpClient
@inject IJSRuntime JS
<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
@if (works?.Any() == true)
{
    @foreach (var item in works)
    {
        <div>@item.ID<br />@item.Name<br />@item.Title</div>
    }
}
@code {
    public class Work
    {
        public int ID { get; set; } 
        public string? Name { get; set; } 
        public string? Title { get; set; }
    }
    //public async ValueTask<List<Work>?> Get() =>
    //    await _httpClient.GetFromJsonAsync<List<Work>>($"https://cms.innovustech.in/api/works");
    public async ValueTask<List<Work>?> Get()
    {
        // var 
        _httpClient.DefaultRequestHeaders.Add("Accept", "*/*");
        _httpClient.DefaultRequestHeaders.Add("Accept-Encoding", "gzip, deflate, br");

        if (string.IsNullOrEmpty(remoteUserAgent))
        {
            _httpClient.DefaultRequestHeaders.Add("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36");  //you can replace it to yours.

        }
        else
        {
             _httpClient.DefaultRequestHeaders.Add("User-Agent", remoteUserAgent);
        } 
        var response = await _httpClient.GetAsync($"https://cms.innovustech.in/api/works"); 
        string json = await response.Content.ReadAsStringAsync(); 

        List<Work> items = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Work>>(json);

        return await Task.FromResult<List<Work>>(items);

    }
    List<Work>? works = new();
    private string remoteUserAgent ="";
    protected override async Task OnInitializedAsync()
    { 
        works = await Get(); //show error here that I mentioned before
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            remoteUserAgent = await JS.InvokeAsync<string>("getUserAgent");
            StateHasChanged();
        }
    }
}

The output as below:

User's image

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion

Prathamesh Shende 441 Reputation points

2023-08-03T07:40:51.82+00:00

Thank you so much.
So the issue is in Blazor Server Project not in API, right? So I always need to specify the header while consuming api in blazor server. Is there any code that put into API ?

This is the program.cs code of API.

builder.Services.AddCors(options => { options.AddPolicy(name: MyPolicy, builder => { builder.WithOrigins("https://localhost:44382").AllowAnyMethod().AllowAnyHeader().AllowCredentials(); }); });
Anonymous

2023-08-03T07:53:08.4033333+00:00

Yes, the issue relates to the Blazor Server side, not the API.

We need to specify the user agent while consuming the API in Blazor Server. You can also check the official document and sample: Call a web API from ASP.NET Core Blazor
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2023-08-03T15:18:21.36+00:00

the issue is the different versions of HttpClient.

In WASM, HttpClient does a javascript interop to make a network call. the javascript network layer passes several headers by default, the user agent, the accept (may cause your issue) and any cookies passed to the page.

In server, the native HttpClient is used. It does not include any default headers.

Answer 2

Bruce (SqlWork.com) 77,686 Volunteer Moderator

the server code is getting a 500 error. most likely the payload or url is invalid. maybe a header is wrong. you should log the response html so you can debug. also the service called should log the error. I use request guids, so in the errorlogs, I can match the failing call to the failing service request.

An important part of building a system is adequate error logging, so production errors can be diagnosed.

Prathamesh Shende 441 Reputation points

2023-08-02T16:43:00.9533333+00:00

i have installed the serilog to record the error log I already mentioned the above the error log that I am getting .
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2023-08-02T21:28:07.49+00:00

the important error is the called api service, why did it return a 500 error? show its logged error message.
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2023-08-02T21:40:44.05+00:00

ignore - force display of comment

Share via

Blazor Wasm Asp.net Core hosted WebApi not consumed by Blazor Server

1 additional answer

Your answer