Why Routing is not working in .NET 7 Blazor Server App

Question

I'm having trouble with what I thank is a routing issue. I have added a controller to a .NET 7 Blazor Server app and I cannot get the routing to work correctly. I'm posting what my code looks like.

[Route("api/[controller]")]
[ApiController]
public class ProductController : ControllerBase
{
    private static List<Product> Products = new List<Product>
        {
            new Product { Id = 1, Title = "Die Cut", Description="Die Cut Sticker Cut around the outer edege of the design.",Image="./Images/DieCut.jpg", Price= 2.99m },
            new Product { Id = 2, Title = "Circle Cut", Description="Round Sticker With Your Design In The Center.",Image="./Images/OvalCut.jpg", Price= 2.99m },
            new Product { Id = 3, Title = "Square Cut", Description="Square Sticker With Your Design In The Center.",Image="./Images/SquareCut.jpg", Price= 3.99m },
            new Product { Id = 4, Title = "Oval Cut", Description="Oval Sticker With Your Design In The Center.",Image="./Images/OvalCut.jpg", Price= 4.99m },
            new Product { Id = 5, Title = "Clear Back", Description="Die Cut Sticker Cut Around The Outer Edege Of The Design On Clear Material.",Image="./Images/ClearDieCut.jpg", Price= 5.99m },
            new Product { Id = 5, Title = "Glow In The Dark", Description="Any Cut Type On Glow In The Dark Material.",Image="./Images/GlowInDark.jpg", Price= 6.99m },
        };

    [HttpGet]
    public async Task<IActionResult> GetProducts()
    {
        return Ok(Products);
    }
}

If I call the controller like this:

protected override async Task OnInitializedAsync()
{
    var result = await Http.GetFromJsonAsync<List<Product>>("api/Product");

    if (result != null)
    {
        Products = result;
    }
}

I get this error:

InvalidOperationException: An invalid request URI was provided. Either the request URI must be an absolute URI or BaseAddress must be set.

If I set the full Http link in the method like this, it works:

private static List<Product> Products = new List<Product>();

protected override async Task OnInitializedAsync()
{
    var result = await Http.GetFromJsonAsync<List<Product>>("https://localhost:7157/api/Product");

    if (result != null)
    {
        Products = result;
    }
}

Is this a routing issue and if so how do I fix it?

Thanks Bryan

Answer 1

Since you could hit the api with an absolute url,it's not a route issue.

If you want to omit the base address when you use the httpclient in blazor component,you could try :

in program.cs:

var uri = builder.Configuration.GetValue<string>("HttpClientBaseUri");

builder.Services.AddHttpClient("", op =>
{
    op.BaseAddress = new Uri(uri);
});

in appsettings.json:

"HttpClientBaseUri": "your target uri"

in Blazor Component:

@inject  IHttpClientFactory httpclientfactory

.....

 var client = httpclientfactory.CreateClient("apiclient");
 var result = await client.GetFromJsonAsync<List<Product>>("api/Product");