Appeler une API web à partir d’ASP.NET Core Blazor

Cet article explique comment appeler une API web à partir d’une application Blazor.

Package

Le package System.Net.Http.Json fournit des méthodes d’extension pour System.Net.Http.HttpClient et System.Net.Http.HttpContent qui effectuent la sérialisation et la désérialisation automatiques à l’aide de System.Text.Json. Le package System.Net.Http.Json est fourni par le framework partagé .NET et ne nécessite pas l’ajout d’une référence de package à l’application.

builder.Services.AddScoped(sp =>
    new HttpClient
    {
        BaseAddress = new Uri(builder.Configuration["FrontendUrl"] ?? "https://localhost:5002")
    });

builder.Services.AddHttpClient();

public class ClientMovieService(HttpClient http) : IMovieService
{
    public async Task<Movie[]> GetMoviesAsync(bool watchedMovies) => 
        await http.GetFromJsonAsync<Movie[]>("movies") ?? [];
}

public class ServerMovieService(MovieContext db) : IMovieService
{
    public async Task<Movie[]> GetMoviesAsync(bool watchedMovies) => 
        watchedMovies ? 
        await db.Movies.Where(t => t.IsWatched).ToArrayAsync() : 
        await db.Movies.ToArrayAsync();
}

Scénarios côté serveur pour l’appel d’API web externes

Les composants basés sur le serveur appellent des API web externes en utilisant des instances HttpClient, généralement créées avec IHttpClientFactory. Pour obtenir des conseils qui s’appliquent aux applications côté serveur, consultez Effectuer des requêtes HTTP en utilisant IHttpClientFactory dans ASP.NET Core.

Une application côté serveur n’inclut pas de service HttpClient. Fournissez un HttpClient à l’application à l’aide du framework de fabrique HttpClient.

Dans le fichier Program :

builder.Services.AddHttpClient();

Le composant Razor suivant effectue une requête auprès d’une API web pour les branches GitHub, comme dans l’exemple d’Utilisation de base de l’article Effectuer des requêtes HTTP en utilisant IHttpClientFactory dans ASP.NET Core.

CallWebAPI.razor:

@page "/call-web-api"
@using System.Text.Json
@using System.Text.Json.Serialization
@inject IHttpClientFactory ClientFactory

<h1>Call web API from a Blazor Server Razor component</h1>

@if (getBranchesError || branches is null)
{
    <p>Unable to get branches from GitHub. Please try again later.</p>
}
else
{
    <ul>
        @foreach (var branch in branches)
        {
            <li>@branch.Name</li>
        }
    </ul>
}

@code {
    private IEnumerable<GitHubBranch>? branches = [];
    private bool getBranchesError;
    private bool shouldRender;

    protected override bool ShouldRender() => shouldRender;

    protected override async Task OnInitializedAsync()
    {
        var request = new HttpRequestMessage(HttpMethod.Get,
            "https://api.github.com/repos/dotnet/AspNetCore.Docs/branches");
        request.Headers.Add("Accept", "application/vnd.github.v3+json");
        request.Headers.Add("User-Agent", "HttpClientFactory-Sample");

        var client = ClientFactory.CreateClient();

        var response = await client.SendAsync(request);

        if (response.IsSuccessStatusCode)
        {
            using var responseStream = await response.Content.ReadAsStreamAsync();
            branches = await JsonSerializer.DeserializeAsync
                <IEnumerable<GitHubBranch>>(responseStream);
        }
        else
        {
            getBranchesError = true;
        }

        shouldRender = true;
    }

    public class GitHubBranch
    {
        [JsonPropertyName("name")]
        public string? Name { get; set; }
    }
}

Dans l’exemple précédent pour C# 12 ou ultérieur, un tableau vide ([]) est créé pour la variable branches. Pour les versions antérieures de C#, créez un tableau vide (Array.Empty<GitHubBranch>()).

Pour obtenir un exemple de travail supplémentaire, consultez l’exemple de chargement de fichiers côté serveur qui charge des fichiers sur un contrôleur d’API web dans l’article Chargements de fichiersBlazor ASP.NET Core.

Ajouter le service HttpClient

L’aide fournie dans cette section s’applique aux scénarios côté client.

Les composants côté client appellent des API web en utilisant un service HttpClient préconfiguré, qui se concentre sur l’envoi de requêtes au serveur d’origine. Des configurations de service HttpClient supplémentaires pour d’autres API web peuvent être créées dans le code du développeur. Les requêtes sont composées à l’aide d’helpers Blazor JSON ou avec HttpRequestMessage. Les requêtes peuvent inclure la configuration de l’option API Fetch.

Les exemples de configuration de cette section ne sont utiles que lorsqu’une API web unique est appelée pour une seule instance HttpClient dans l’application. Lorsque l’application doit appeler plusieurs API web, chacune avec sa propre adresse de base et sa configuration, vous pouvez adopter les approches suivantes, qui sont décrites ultérieurement dans cet article :

• Nommé HttpClient avec IHttpClientFactory: chaque API web reçoit un nom unique. Quand le code d’application ou un Razor composant appelle une API web, il utilise une instance nommée HttpClient pour effectuer l’appel.
• Typé HttpClient : chaque API web est typée. Quand le code d’application ou un Razor composant appelle une API web, il utilise une instance typée HttpClient pour effectuer l’appel.

Dans le fichier Program, ajoutez un service HttpClient s’il n’est pas déjà présent à partir d’un modèle de projet Blazor utilisé pour créer l’application :

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

L’exemple précédent définit l’adresse de base avec builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress). Cette propriété récupère l’adresse de base de l’application. Elle est généralement dérivée de la valeur href de la balise <base> dans la page hôte.

Les cas d’usage les plus courants pour l’utilisation de l’adresse de base du client sont les suivants :

• Le projet client (.Client) d’une application Blazor Web App (.NET 8 ou version ultérieure) effectue des appels d’API web à partir de composants WebAssembly ou d’un code qui s’exécute sur le client dans WebAssembly vers des API de l’application serveur.
• Le projet client (Client) d’une application hébergée Blazor WebAssembly effectue des appels d’API web vers le projet de serveur (Server). Notez que le modèle de projet hébergé Blazor WebAssembly n’est plus disponible dans .NET 8 ou version ultérieure. Toutefois, les applications hébergées Blazor WebAssembly restent prises en charge pour .NET 8.

Si vous appelez une API web externe (pas dans le même espace d’URL que l’application cliente), définissez l’URI sur l’adresse de base de l’API web. L’exemple suivant définit l’adresse de base de l’API web sur https://localhost:5001, où une application API web distincte est en cours d’exécution et prête à répondre aux demandes de l’application cliente :

builder.Services.AddScoped(sp => 
    new HttpClient
    {
        BaseAddress = new Uri("https://localhost:5001")
    });

Helpers JSON

HttpClient est disponible en tant que service préconfiguré pour envoyer des requêtes au serveur d’origine.

HttpClient et les helpers JSON (System.Net.Http.Json.HttpClientJsonExtensions) sont également utilisés pour appeler des points de terminaison d’API web tiers. HttpClient est implémenté à l’aide de l’API Fetch du navigateur et est soumis à ses limitations, y compris l’application de la stratégie de même origine, qui est abordée plus loin dans cet article dans la section Partage de ressources Cross-Origin (CORS).

L’adresse de base du client est définie sur l’adresse du serveur d’origine. Injectez une instance de HttpClient dans un composant à l’aide de la directive @inject :

@using System.Net.Http
@inject HttpClient Http

Utilisez l’espace de noms System.Net.Http.Json pour accéder à HttpClientJsonExtensions, y compris GetFromJsonAsync, PutAsJsonAsync et PostAsJsonAsync :

@using System.Net.Http.Json

Les sections suivantes couvrent les helpers JSON :

• GET
• POST
• PUT
• PATCH

System.Net.Http inclut des méthodes supplémentaires pour envoyer des requêtes HTTP et recevoir des réponses HTTP, par exemple pour envoyer une requête DELETE. Pour plus d’informations, consultez la section DELETE et autres méthodes d’extension.

GET à partir de JSON (GetFromJsonAsync)

GetFromJsonAsync envoie une requête HTTP GET et analyse le corps de la réponse JSON pour créer un objet.

Dans le code du composant suivant, les todoItems sont affichés par le composant. GetFromJsonAsync est appelé lorsque l’initialisation du composant est terminée (OnInitializedAsync).

todoItems = await Http.GetFromJsonAsync<TodoItem[]>("todoitems");

POST en tant que JSON (PostAsJsonAsync)

PostAsJsonAsync envoie une requête POST à l’URI spécifié contenant la valeur sérialisée en JSON dans le corps de la requête.

Dans le code de composant suivant, newItemName est fourni par un élément lié du composant. La méthode AddItem est déclenchée en sélectionnant un élément <button>.

await Http.PostAsJsonAsync("todoitems", addItem);

PostAsJsonAsyncRetourne un HttpResponseMessage. Pour désérialiser le contenu JSON du message de réponse, utilisez la méthode d’extension ReadFromJsonAsync. L’exemple suivant lit les données météorologiques JSON sous forme de tableau :

var content = await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ?? 
    Array.Empty<WeatherForecast>();

PUT en tant que JSON (PutAsJsonAsync)

PutAsJsonAsync envoie une requête HTTP PUT avec du contenu encodé en JSON.

Dans le code de composant suivant, les valeurs editItem pour Name et IsCompleted sont fournies par des éléments liés du composant. L’élément est défini lorsque l’élément Id est sélectionné dans une autre partie de l’interface utilisateur (non affiché), et EditItem est appelé. La méthode SaveItem est déclenchée en sélectionnant l’élément <button>. L’exemple suivant n’affiche pas le chargement de todoItems pour la concision. Consultez la section GET à partir de JSON (GetFromJsonAsync) pour obtenir un exemple de chargement d’éléments.

await Http.PutAsJsonAsync($"todoitems/{editItem.Id}", editItem);

PutAsJsonAsyncRetourne un HttpResponseMessage. Pour désérialiser le contenu JSON du message de réponse, utilisez la méthode d’extension ReadFromJsonAsync. L’exemple suivant lit les données météorologiques JSON sous forme de tableau :

var content = await response.Content.ReadFromJsonAsync<WeatherForecast[]>() ?? 
    Array.Empty<WeatherForecast>();

await Http.PatchAsJsonAsync(
    $"todoitems/{id}", 
    "[{\"operationType\":2,\"path\":\"/IsComplete\",\"op\":\"replace\",\"value\":true}]");

var response = await Http.PatchAsJsonAsync(...);
var content = await response.Content.ReadFromJsonAsync<TodoItem[]>() ??
    Array.Empty<TodoItem>();

[
  {
    "operationType": 2,
    "path": "/IsComplete",
    "op": "replace",
    "value": true
  }
]

@using System.Text.Json
@using System.Text.Json.Serialization
@using Microsoft.AspNetCore.JsonPatch

var patchDocument = new JsonPatchDocument<TodoItem>()
    .Replace(p => p.IsComplete, true);

private async Task UpdateItem(long id)
{
    await Http.PatchAsJsonAsync(
        $"todoitems/{id}", 
        patchDocument.Operations, 
        new JsonSerializerOptions()
        {
            DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingDefault
        });
}

using Microsoft.AspNetCore.JsonPatch;

app.MapPatch("/todoitems/{id}", async (long id, TodoContext db) =>
{
    if (await db.TodoItems.FindAsync(id) is TodoItem todo)
    {
        var patchDocument = 
            new JsonPatchDocument<TodoItem>().Replace(p => p.IsComplete, true);
        patchDocument.ApplyTo(todo);
        await db.SaveChangesAsync();

        return TypedResults.Ok(todo);
    }

    return TypedResults.NoContent();
});

DELETE (DeleteAsync) et autres méthodes d’extension

System.Net.Http inclut des méthodes d’extension supplémentaires pour l’envoi de requêtes HTTP et la réception de réponses HTTP. HttpClient.DeleteAsync est utilisé pour envoyer une requête HTTP DELETE à une API web.

Dans le code de composant suivant, l’élément <button> appelle la méthode DeleteItem. L’élément <input> lié fournit le id de l’élément à supprimer.

await Http.DeleteAsync($"todoitems/{id}");

HttpClient nommé avec IHttpClientFactory

Les services IHttpClientFactory et la configuration d’un HttpClient nommé sont pris en charge.

Ajoutez le package NuGet Microsoft.Extensions.Http à l’application.

Dans le fichier Program d’un projet client :

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

L’exemple côté client précédent définit l’adresse de base avec builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress). Cette propriété récupère l’adresse de base de l’application côté client. Elle est généralement dérivée de la valeur href de la balise <base> dans la page hôte.

Si vous appelez une API web externe (pas dans le même espace d’URL que l’application cliente) ou si vous configurez les services dans une application côté serveur (par exemple, pour traiter le prérendu des composants côté client sur le serveur), définissez l’URI sur l’adresse de base de l’API web. L’exemple suivant définit l’adresse de base de l’API web sur https://localhost:5001, où une application API web distincte est en cours d’exécution et prête à répondre aux demandes de l’application cliente :

builder.Services.AddHttpClient("WebAPI", client => 
    client.BaseAddress = new Uri("https://localhost:5001"));

Dans le composant de code suivant :

• Une instance de IHttpClientFactory crée un HttpClient nommé.
• Le HttpClient nommé est utilisé pour émettre une requête GET pour les données de prévision météorologiques JSON à partir de l’API web sur /forecast.

@inject IHttpClientFactory ClientFactory

...

@code {
    private Forecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        var client = ClientFactory.CreateClient("WebAPI");

        forecasts = await client.GetFromJsonAsync<Forecast[]>("forecast") ?? [];
    }
}

HttpClient typé

Le HttpClient typé utilise une ou plusieurs instances HttpClient de l’application, par défaut ou nommées, pour retourner des données à partir d’un ou plusieurs points de terminaison d’API web.

Ajoutez le package NuGet Microsoft.Extensions.Http à l’application.

L’exemple suivant émet une requête GET pour les données de prévision météorologiques JSON à partir de l’API web sur /forecast.

ForecastHttpClient.cs:

using System.Net.Http.Json;

namespace BlazorSample.Client;

public class ForecastHttpClient(HttpClient http)
{
    public async Task<Forecast[]> GetForecastAsync() => 
        await http.GetFromJsonAsync<Forecast[]>("forecast") ?? [];
}

Dans le fichier Program d’un projet client :

builder.Services.AddHttpClient<ForecastHttpClient>(client => 
    client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress));

L’exemple précédent définit l’adresse de base avec builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress). Cette propriété récupère l’adresse de base de l’application côté client. Elle est généralement dérivée de la valeur href de la balise <base> dans la page hôte.

Si vous appelez une API web externe (pas dans le même espace d’URL que l’application cliente) ou si vous configurez les services dans une application côté serveur (par exemple, pour traiter le prérendu des composants côté client sur le serveur), définissez l’URI sur l’adresse de base de l’API web. L’exemple suivant définit l’adresse de base de l’API web sur https://localhost:5001, où une application API web distincte est en cours d’exécution et prête à répondre aux demandes de l’application cliente :

builder.Services.AddHttpClient<ForecastHttpClient>(client => 
    client.BaseAddress = new Uri("https://localhost:5001"));

Les composants injectent le HttpClient typé pour appeler l’API web.

Dans le composant de code suivant :

• Une instance du ForecastHttpClient précédent est injectée, ce qui crée un HttpClient typé.
• Le HttpClient typé est utilisé pour émettre une requête GET pour les données de prévision météorologiques JSON à partir de l’API web.

@inject ForecastHttpClient Http

...

@code {
    private Forecast[]? forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetForecastAsync();
    }
}

justificatifs des requêtes fondées sur Cookie

Les conseils de cette section s’appliquent aux scénarios côté client qui s’appuient sur une authentification cookie.

Pour l’authentification basée sur cookie, considérée comme plus sécurisée que l’authentification par jeton du porteur, cookie informations d’identification peuvent être envoyées avec chaque requête d’API web en appelant AddHttpMessageHandler avec un DelegatingHandler sur un HttpClientpréconfiguré. Le gestionnaire configure SetBrowserRequestCredentials avec BrowserRequestCredentials.Include, qui communique au navigateur d’envoyer des informations d’identification avec chaque requête, comme les cookies ou les en-têtes d’authentification HTTP, y compris pour les requêtes inter-origines.

CookieHandler.cs:

public class CookieHandler : DelegatingHandler
{
    protected override Task<HttpResponseMessage> SendAsync(
        HttpRequestMessage request, CancellationToken cancellationToken)
    {
        request.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
        request.Headers.Add("X-Requested-With", ["XMLHttpRequest"]);

        return base.SendAsync(request, cancellationToken);
    }
}

Le CookieHandler est inscrit dans le ficher Program :

builder.Services.AddTransient<CookieHandler>();

Le gestionnaire de messages est ajouté à toute HttpClient préconfigurée qui nécessite l’authentification cookie :

builder.Services.AddHttpClient(...)
    .AddHttpMessageHandler<CookieHandler>();

Lors de la composition d’un HttpRequestMessage, définissez directement les informations d’identification et l’en-tête de la requête de navigateur :

var requestMessage = new HttpRequestMessage() { ... };

requestMessage.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);
requestMessage.Headers.Add("X-Requested-With", ["XMLHttpRequest"]);

HttpClient et HttpRequestMessage avec des options de requête d’API Fetch

L’aide fournie dans cette section s’applique aux scénarios côté client qui reposent sur une authentification par jeton du porteur.

HttpClient (documentation de l’API) et HttpRequestMessage peuvent être utilisés pour personnaliser les requêtes. Par exemple, vous pouvez spécifier la méthode HTTP et les en-têtes de requête. Le composant suivant effectue une requête POST sur un point de terminaison d’API web et affiche le corps de la réponse.

TodoRequest.razor:

@page "/todo-request"
@using System.Net.Http.Headers
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject HttpClient Http
@inject IAccessTokenProvider TokenProvider

<h1>ToDo Request</h1>

<h1>ToDo Request Example</h1>

<button @onclick="PostRequest">Submit POST request</button>

<p>Response body returned by the server:</p>

<p>@responseBody</p>

@code {
    private string? responseBody;

    private async Task PostRequest()
    {
        var requestMessage = new HttpRequestMessage()
        {
            Method = new HttpMethod("POST"),
            RequestUri = new Uri("https://localhost:10000/todoitems"),
            Content =
                JsonContent.Create(new TodoItem
                {
                    Name = "My New Todo Item",
                    IsComplete = false
                })
        };

        var tokenResult = await TokenProvider.RequestAccessToken();

        if (tokenResult.TryGetToken(out var token))
        {
            requestMessage.Headers.Authorization =
                new AuthenticationHeaderValue("Bearer", token.Value);

            requestMessage.Content.Headers.TryAddWithoutValidation(
                "x-custom-header", "value");

            var response = await Http.SendAsync(requestMessage);
            var responseStatusCode = response.StatusCode;

            responseBody = await response.Content.ReadAsStringAsync();
        }
    }

    public class TodoItem
    {
        public long Id { get; set; }
        public string? Name { get; set; }
        public bool IsComplete { get; set; }
    }
}

L’implémentation de HttpClient du côté du client de Blazor utilise l’API Fetch et configure les options de l’API Fetch spécifiques à la requête sous-jacentes par les méthodes d’extension HttpRequestMessage et par WebAssemblyHttpRequestMessageExtensions. Définissez des options supplémentaires à l’aide de la méthode d’extension générique SetBrowserRequestOption. Blazor et l’API Fetch sous-jacente n’ajoutent ou ne modifient pas directement les en-têtes de demande. Pour plus d’informations sur la façon dont les agents utilisateur (comme les navigateurs) interagissent avec les en-têtes, consultez la documentation complète sur de l’agent utilisateur externe et d’autres ressources web.

La réponse HTTP est généralement mise en mémoire tampon pour activer la prise en charge des lectures synchrones sur le contenu de la réponse. Pour activer la prise en charge de la diffusion en continu des réponses, utilisez la méthode d’extension SetBrowserResponseStreamingEnabled sur la requête.

Pour inclure des informations d’identification dans une requête cross-origin, utilisez la méthode d’extension SetBrowserRequestCredentials :

requestMessage.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);

Pour plus d’informations sur les options de l’API Fetch, consultez Documents web MDN : WindowOrWorkerGlobalScope.fetch() : Paramètres.

Gérer les erreurs

Gérez les erreurs de réponse de l’API web dans le code du développeur lorsqu’elles se produisent. Par exemple, GetFromJsonAsync attend une réponse JSON de l’API web avec un Content-Type application/json. Si la réponse n’est pas au format JSON, la validation du contenu renvoie une exception NotSupportedException.

Dans l’exemple suivant, le point de terminaison d’URI pour la requête de données de prévision météorologique est mal orthographié. L’URI doit être WeatherForecast, mais apparaît dans l’appel sous la forme WeatherForcast, la lettre e manquant dans Forecast.

L’appel GetFromJsonAsync s’attend à ce que du JSON soit renvoyé, mais l’API web renvoie du code HTML pour une exception non prise en charge avec un Content-Type text/html. L’exception non gérée se produit car le chemin d’accès à /WeatherForcast est introuvable et l’intergiciel ne peut pas servir une page ou une vue pour la requête.

Dans le OnInitializedAsync du client, une exception NotSupportedException est renvoyée lorsque le contenu de la réponse est validée comme non-JSON. L’exception est interceptée dans le bloc catch, où une logique personnalisée peut consigner l’erreur ou présenter un message d’erreur convivial à l’utilisateur.

ReturnHTMLOnException.razor:

@page "/return-html-on-exception"
@using {PROJECT NAME}.Shared
@inject HttpClient Http

<h1>Fetch data but receive HTML on unhandled exception</h1>

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <h2>Temperatures by Date</h2>

    <ul>
        @foreach (var forecast in forecasts)
        {
            <li>
                @forecast.Date.ToShortDateString():
                @forecast.TemperatureC &#8451;
                @forecast.TemperatureF &#8457;
            </li>
        }
    </ul>
}

<p>
    @exceptionMessage
</p>

@code {
    private WeatherForecast[]? forecasts;
    private string? exceptionMessage;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            // The URI endpoint "WeatherForecast" is misspelled on purpose on the 
            // next line. See the preceding text for more information.
            forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForcast");
        }
        catch (NotSupportedException exception)
        {
            exceptionMessage = exception.Message;
        }
    }
}

Pour plus d’informations, consultez Gérer les erreurs dans les applications ASP.NET Core Blazor.

CORS (Cross Origin Resource Sharing)

La sécurité du navigateur empêche une page web d’envoyer des requêtes à un domaine différent de celui qui a servi la page web. Cette restriction est appelée stratégie de même origine. La stratégie de même origine restreint (mais n’empêche pas) un site malveillant de lire des données sensibles à partir d’un autre site. Pour effectuer des requêtes à partir du navigateur vers un point de terminaison avec une origine différente, le point de terminaison doit activer le partage de ressources Cross-Origin (CORS).

Pour plus d’informations sur CORS côté serveur, consultez Activer les requêtes multi-origines (CORS) dans ASP.NET Core. Les exemples de l’article ne concernent pas directement les scénarios du composant Razor, mais l’article est utile pour apprendre les concepts généraux de CORS.

Pour plus d’informations sur les requêtes CORS côté client, consultez Scénarios de sécurité supplémentaires ASP.NET CoreBlazor WebAssembly.

@inject AntiforgeryStateProvider Antiforgery

private async Task OnSubmit()
{
    var antiforgery = Antiforgery.GetAntiforgeryToken();
    var request = new HttpRequestMessage(HttpMethod.Post, "action");
    request.Headers.Add("RequestVerificationToken", antiforgery.RequestToken);
    var response = await client.SendAsync(request);
    ...
}

Exemples de composants de framework Blazor pour tester l’accès à l’API web

Différents outils réseau sont disponibles publiquement pour tester directement les applications back-ends d’API web, comme Firefox Browser Developer. La source de référence du framework Blazor inclut des ressources de test HttpClient utiles pour tester :

Ressources HttpClientTest dans le dépôt GitHub dotnet/aspnetcore

Ressources supplémentaires

Général

• Cross-Origin Resource Sharing (CORS) at W3C
• Activer les requêtes cross-origin (CORS) dans ASP.NET Core : bien que le contenu s’applique aux applications ASP.NET Core, et non aux composants Razor, l’article traite des concepts généraux de CORS.

Atténuation des attaques par surcharge POST

Les API web peuvent être vulnérables à une attaque par surcharge POST, également appelée attaque par affectation en masse. Une attaque par surcharge POST se produit quand un utilisateur malveillant soumet un formulaire HTML via la méthode POST au serveur de traitement des données, en ajoutant des données correspondant à des propriétés qui ne font pas partie du formulaire affiché, et que le développeur ne souhaite pas que les utilisateurs modifient. L’expression « surcharge POST » signifie littéralement que l’utilisateur malveillant a surchargé le formulaire de données POST.

Pour obtenir des conseils sur l’atténuation des attaques par surcharge POST, consultez Tutoriel : créer une API web avec ASP.NET Core.

Côté serveur

• Scénarios de sécurité supplémentaires ASP.NET CoreBlazor côté serveur : inclut une couverture sur l’utilisation de HttpClient pour effectuer des requêtes d’API web sécurisées.
• Effectuer des requêtes HTTP en utilisant IHttpClientFactory dans ASP.NET Core
• Appliquer HTTPS dans ASP.NET Core
• Configuration du point de terminaison HTTPS Kestrel

Côté client

• Scénarios de sécurité supplémentaires ASP.NET Core Blazor WebAssembly : inclut une couverture sur l’utilisation de HttpClient pour effectuer des requêtes d’API web sécurisées.
• Utiliser l’API Graph avec ASP.NET Core Blazor WebAssembly
• API Fetch