How to use web api with blazor client

Question

User2076108182 posted

Hello

I have a blazor client project.

I want to display data form server (another site api)

How can I do ?

for example:

@page "/fetchdata"
@using BlazorDemo.Shared
@inject HttpClient Http

<h1>Weather forecast</h1>

<p>This component demonstrates fetching data from the server.</p>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }
        </tbody>
    </table>
}

@code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("https://localhost:44346/weatherforecast");
    }

}

https://localhost:44346/weatherforecast is a web api from another site.

but it not works.

thanks for your help

Answer 1

User-821857111 posted

The HttpClient implementation in Blazor uses the Fetch API, which requires that the remote Web API service enables CORS for your domain. Alternatively, you could create a proxy service that you host which calls the remote service from server-side code (which doesn't require CORS enabled) and then call that from your client side app.

Answer 2

User2076108182 posted

you could create a proxy service that you host which calls the remote service from server-side code (which doesn't require CORS enabled)

thanks for your reply, Can you give me some code, Thanks for your help!

Answer 3

User-821857111 posted

Can you give me some code

What for? Examples of how to use HttpClient in C# code? There are lots here: https://www.google.com/search?q=httpclient+c%23+example

You can create a new Wasm Blazor project with the Server Hosted option ticked which includes a Web API project housing the weather forecast service. Replace the code in that to call the remote Web API service. So your client code calls the weather forecast service, which in turn calls the remote service.