[Solved] How do I register HTTP client in Blazor .NET 8? – Blazor

The Problem:

In a Blazor .NET 8 application using webassembly rendering, how can I register an HTTP client with custom configuration and ensure it is accessible in components?

The Solutions:

Solution 1: Using AddScoped

In Blazor .NET 8, you can register the HttpClient service using the AddScoped method in the Program.cs file. Here’s an example:

builder.Services.AddScoped(http => new HttpClient
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});

This code adds a scoped service of type HttpClient to the dependency injection container. The HttpClient instance will be created once per HTTP request and will be disposed of after the request is completed. This ensures that each HTTP request has its own dedicated HttpClient instance, which is important for maintaining isolation and preventing cross-request contamination.

The BaseAddress property of the HttpClient instance is set to the base address of the application, which is typically obtained from the HostEnvironment object. This ensures that the HttpClient instance will send requests to the correct server.

Solution 3: Installing Microsoft.Extensions.Http NuGet package

To register an HTTP client in Blazor .NET 8, you need to install the Microsoft.Extensions.Http NuGet package in your client project. This package provides the necessary extension methods for registering HTTP clients.

Once the package is installed, you can register the HTTP client in the Program.cs file of your client project as follows:


builder.Services.AddHttpClient("My.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
.AddHttpMessageHandler();


This code registers an HTTP client with the name "My.ServerAPI" and sets its base address to the base address of the client project. It also adds the BaseAddressAuthorizationMessageHandler as an HTTP message handler, which is used for authentication purposes.

With this setup, you can inject the HTTP client into your components and pages using dependency injection, as shown below:


[Inject]
private HttpClient HttpClient { get; set; }


You can then use the HTTP client to send requests to your server API.

Video Explanation: