Een web-API aanroepen vanuit ASP.NET Core Blazor

Artikel
02/09/2025

Notitie

Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Waarschuwing

Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie de .NET- en .NET Core-ondersteuningsbeleidvoor meer informatie. Zie de .NET 9-versie van dit artikelvoor de huidige release.

Belangrijk

Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.

Zie de .NET 9-versie van dit artikelvoor de huidige release.

In dit artikel wordt beschreven hoe u een web-API aanroept vanuit een Blazor-app.

Pakket

Het System.Net.Http.Json-pakket biedt uitbreidingsmethoden voor System.Net.Http.HttpClient en System.Net.Http.HttpContent die automatische serialisatie en deserialisatie uitvoeren met behulp van System.Text.Json. Het System.Net.Http.Json-pakket wordt geleverd door het gedeelde .NET-framework en hoeft geen pakketreferentie aan de app toe te voegen.

Voorbeeld-apps

Bekijk de voorbeeld-apps in de dotnet/blazor-samples GitHub-opslagplaats.

`BlazorWebAppCallWebApi`

Een externe (niet in de Blazor Web App) todo list web-API aanroepen vanuit een Blazor Web App:

Backend: een web-API-app voor het onderhouden van een takenlijst, op basis van minimale API's. De web-API-app is een afzonderlijke app van de Blazor Web App, mogelijk gehost op een andere server.
BlazorApp / BlazorApp.Client: een Blazor Web App die de web-API-app aanroept met een HttpClient voor takenlijstbewerkingen, zoals het maken, lezen, bijwerken en verwijderen van (CRUD)-items uit de takenlijst.

Voor rendering aan de clientzijde (CSR), dat interactieve WebAssembly-onderdelen en autoonderdelen bevat die CSR hebben aangenomen, worden aanroepen gedaan met een vooraf geconfigureerde HttpClient geregistreerd in het Program-bestand van het clientproject (BlazorApp.Client):

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

Voor server-side rendering (SSR), dat prerendered en interactieve Server-onderdelen, vooraf gegenereerde WebAssembly-onderdelen en Auto-onderdelen bevat die vooraf zijn gerenderd of die SSR hebben aangenomen, worden aanroepen gedaan met een HttpClient geregistreerd in het Program-bestand van het serverproject (BlazorApp):

builder.Services.AddHttpClient();

Roep een interne (binnen de Blazor Web App) filmlijst-API aan, waar de API zich bevindt in het serverproject van de Blazor Web App:

BlazorApp: een Blazor Web App die een filmlijst onderhoudt:
- Wanneer bewerkingen worden uitgevoerd op de filmlijst in de app op de server, worden gewone API-aanroepen gebruikt.
- Wanneer API-aanroepen worden gedaan door een webclient, wordt een web-API gebruikt voor filmlijstbewerkingen op basis van Minimale API's.
BlazorApp.Client: het klantproject van de Blazor Web App, dat interactieve WebAssembly- en automatische onderdelen bevat voor het gebruikersbeheer van de filmlijst.

Voor CSR, dat interactieve WebAssembly-onderdelen en autoonderdelen bevat die CSR hebben aangenomen, worden aanroepen naar de API uitgevoerd via een clientservice (ClientMovieService) die gebruikmaakt van een vooraf geconfigureerde HttpClient die is geregistreerd in het Program-bestand van het clientproject (BlazorApp.Client). Omdat deze aanroepen worden gedaan via een openbaar of privéweb, is de filmlijst-API een web-API.

In het volgende voorbeeld wordt een lijst met films opgehaald van het /movies-eindpunt:

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

Voor SSR, waaronder vooraf gegenereerde en interactieve serveronderdelen, vooraf samengestelde webassembly-onderdelen en autoonderdelen die vooraf worden gerendeerd of SSR hebben aangenomen, worden aanroepen rechtstreeks uitgevoerd via een serverservice (ServerMovieService). De API is niet afhankelijk van een netwerk, dus het is een standaard-API voor CRUD-bewerkingen op de filmlijst.

In het volgende voorbeeld wordt een lijst met films verkregen:

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();
}

`BlazorWebAppCallWebApi_Weather`

Een voorbeeld-app voor weergegevens die gebruikmaakt van streaming-rendering voor weergegevens.

`BlazorWebAssemblyCallWebApi`

Roept een takenlijst-web-API aan vanuit een Blazor WebAssembly-app:

Backend: een web-API-app voor het onderhouden van een takenlijst, op basis van minimale API's.
BlazorTodo: Een Blazor WebAssembly-app die de web-API aanroept met een vooraf geconfigureerde HttpClient voor CRUD-bewerkingen op een todo-lijst.

Scenario's aan de clientzijde voor het aanroepen van externe web-API's

Cliëntgebaseerde componenten roepen externe web-API's aan met behulp van HttpClient exemplaren, meestal gemaakt met een vooraf geconfigureerde HttpClient die zijn geregistreerd in het Program-bestand.

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

Met de volgende Razor component wordt een verzoek gedaan bij een web-API voor GitHub branches, vergelijkbaar met het Basic Usage-voorbeeld in het HTTP-verzoeken doen met IHttpClientFactory in ASP.NET Core artikel.

CallWebAPI.razor:

@page "/call-web-api"
@using System.Text.Json
@using System.Text.Json.Serialization
@inject HttpClient Client

<h1>Call web API from a Blazor WebAssembly 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 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; }
    }
}

In het voorgaande voorbeeld voor C# 12 of hoger wordt een lege matrix ([]) gemaakt voor de variabele branches. Voor eerdere versies van C# die zijn gecompileerd met een SDK die ouder is dan .NET 8, maakt u een lege matrix (Array.Empty<GitHubBranch>()).

Als u .NET/C#-code en -gegevens wilt beveiligen, gebruikt u ASP.NET Core Data Protection--functies met een ASP.NET Core-back-endweb-API. De Blazor WebAssembly-app aan de clientzijde roept de web-API aan de serverzijde aan voor beveiligde app-functies en gegevensverwerking.

Blazor WebAssembly apps worden vaak voorkomen dat directe aanroepen worden uitgevoerd tussen origins naar web-API's vanwege CORS-beveiliging (Cross-Origin Request Sharing). Een typische uitzondering ziet er als volgt uit:

Toegang tot ophalen op {URL} van oorsprong 'https://localhost:{PORT}' is geblokkeerd door CORS-beleid: er is geen header Access-Control-Allow-Origin aanwezig op de aangevraagde resource. Als een ondoorzichtig antwoord aan uw behoeften voldoet, stelt u de modus van de aanvraag in op 'no-cors' om de resource op te halen waarvoor CORS is uitgeschakeld.

Zelfs als u SetBrowserRequestMode aanroept met een BrowserRequestMode veld van NoCors (1) om de voorgaande uitzondering te omzeilen, mislukt de aanvraag vaak vanwege CORS-beperkingen op de oorsprong van de web-API, zoals een beperking die alleen aanroepen van specifieke oorsprongen toestaat of een beperking die JavaScript fetch aanvragen van een browser verhindert. De enige manier waarop dergelijke aanroepen kunnen slagen, is als de web-API die u aanroept uw oorsprong toestaat om haar oorsprong aan te roepen met de juiste CORS-configuratie. Met de meeste externe web-API's kunt u hun CORS-beleid niet configureren. Als u deze beperking wilt aanpakken, moet u een van de volgende strategieën toepassen:

Onderhoud uw eigen ASP.NET Core-back-endweb-API aan de serverzijde. De Blazor WebAssembly-app aan de clientzijde roept uw web-API aan op de server en uw web-API doet de aanvraag vanuit de servergebaseerde C#-code (niet een browser) naar de externe web-API met de juiste CORS-headers, waardoor het resultaat wordt geretourneerd naar de Blazor WebAssembly-app aan de clientzijde.

Gebruik een proxyservice om de aanvraag vanuit de clientzijde van de Blazor WebAssembly app via een proxy naar de externe web-API te sturen. De proxyservice maakt gebruik van een app aan de serverzijde om de aanvraag namens de client in te dienen en retourneert het resultaat nadat de aanroep is geslaagd. In het volgende voorbeeld op basis van CloudFlare's CORS PROXY, is de {REQUEST URI} placeholder de aanvraag-URI:

@using System.Net
@inject IHttpClientFactory ClientFactory

...

@code {
    public async Task CallApi()
    {
        var client = ClientFactory.CreateClient();

        var urlEncodedRequestUri = WebUtility.UrlEncode("{REQUEST URI}");

        var request = new HttpRequestMessage(HttpMethod.Get, 
            $"https://corsproxy.io/?{urlEncodedRequestUri}");

        var response = await client.SendAsync(request);

        ...
    }
}

Scenario's aan de serverzijde voor het aanroepen van externe web-API's

Servercomponenten roepen externe web-API's aan met HttpClient-exemplaren, meestal gemaakt met IHttpClientFactory. Zie HTTP-aanvragen maken met behulp van IHttpClientFactory in ASP.NET Corevoor richtlijnen die van toepassing zijn op apps aan de serverzijde.

Een app aan de serverzijde bevat geen HttpClient-service. Geef de app een HttpClient met de HttpClient fabrieksinfrastructuur.

In het bestand Program:

builder.Services.AddHttpClient();

Met de volgende Razor component wordt een aanvraag ingediend bij een web-API voor GitHub-branches, vergelijkbaar met het Basic Usage-voorbeeld in het HTTP-aanvragen maken met behulp van IHttpClientFactory in ASP.NET Core artikel.

CallWebAPI.razor:

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

<h1>Call web API from a server-side 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; }
    }
}

Voor een extra werkend voorbeeld, zie het server-side bestand-uploadvoorbeeld dat bestanden uploadt naar een web-API-controller in het artikel over ASP.NET Core Blazor bestanduploads.

Serviceabstracties voor web-API-aanroepen

Deze sectie is van toepassing op Blazor Web App's die een web-API in het serverproject onderhouden of web-API-aanroepen transformeren naar een externe web-API.

Wanneer u de interactieve webassembly- en automatische rendermodi gebruikt, worden onderdelen standaard vooraf gegenereerd. Automatische onderdelen worden in eerste instantie ook interactief weergegeven vanaf de server voordat de Blazor bundel downloadt naar de client en de runtime aan de clientzijde wordt geactiveerd. Dit betekent dat onderdelen die deze rendermodi gebruiken, moeten worden ontworpen zodat ze worden uitgevoerd vanaf zowel de client als de server. Als het onderdeel een op een serverproject gebaseerde API moet aanroepen of een aanvraag moet transformeren naar een externe web-API (een buiten de Blazor Web App) bij uitvoering op de client, is de aanbevolen benadering om die API-aanroep achter een serviceinterface te abstraheren en client- en serverversies van de service te implementeren:

De clientversie roept de web-API aan met een vooraf geconfigureerde HttpClient.
De serverversie heeft doorgaans rechtstreeks toegang tot de resources aan de serverzijde. Het injecteren van een HttpClient op de server die oproepen terug naar de server uitvoert, wordt niet aanbevolen, omdat de netwerkaanvraag doorgaans niet nodig is. De API kan ook extern zijn voor het serverproject, maar er is een serviceabstractie voor de server vereist om de aanvraag op een bepaalde manier te transformeren, bijvoorbeeld om een toegangstoken toe te voegen aan een proxied-aanvraag.

Wanneer u de weergavemodus WebAssembly gebruikt, hebt u ook de mogelijkheid om prerendering uit te schakelen, zodat de onderdelen alleen vanuit de client worden weergegeven. Zie ASP.NET Core Blazor rendermodivoor meer informatie.

Voorbeelden (voorbeeld-apps):

Web-API voor filmlijsten in de BlazorWebAppCallWebApi voorbeeld-app.
Web-API voor streamingweergave van weergegevens in de BlazorWebAppCallWebApi_Weather voorbeeld-app.
Weergegevens die naar de client worden geretourneerd in de voorbeeld-apps BlazorWebAppOidc (niet-BFF-patroon) of BlazorWebAppOidcBff (BFF-patroon). Deze apps demonstreren beveiligde (web)API-aanroepen. Zie Een ASP.NET Core Blazor Web App beveiligen met OpenID Connect (OIDC)voor meer informatie.

Blazor Web App externe web-API's

Deze sectie is van toepassing op Blazor Web App's die een web-API aanroepen die worden onderhouden door een afzonderlijk (extern) project, mogelijk gehost op een andere server.

Blazor Web Appnormaal gesproken prerender webassembly-onderdelen aan de clientzijde en automatische onderdelen worden weergegeven op de server tijdens statische of interactieve serverzijde rendering (SSR). HttpClient services zijn niet standaard geregistreerd in het hoofdproject van een Blazor Web App. Als de app wordt uitgevoerd met alleen de HttpClient services die zijn geregistreerd in het .Client-project, zoals beschreven in de sectie De HttpClient-service toevoegen, resulteert het uitvoeren van de app in een runtimefout:

InvalidOperationException: Kan geen waarde opgeven voor eigenschap 'Http' bij het type '... {COMPONENT}'. Er is geen geregistreerde service van het type System.Net.Http.HttpClient.

Gebruik van de volgende methoden:

Voeg de HttpClient-services toe aan het serverproject om de HttpClient beschikbaar te maken tijdens SSR. Gebruik de volgende serviceregistratie in het Program-bestand van het serverproject:
```
builder.Services.AddHttpClient();
```
HttpClient services worden geleverd door het gedeelde framework, zodat een pakketreferentie in het projectbestand van de app niet vereist is.

Voorbeeld: Web-API voor takenlijst in de BlazorWebAppCallWebApivoorbeeldapplicatie
Als prerendering niet vereist is voor een WebAssembly-onderdeel dat de web-API aanroept, schakelt u het prerendering uit door de richtlijnen in ASP.NET Core Blazor rendermodite volgen. Als u deze aanpak gebruikt, hoeft u geen HttpClient-services toe te voegen aan het hoofdproject van de Blazor Web App omdat het onderdeel niet wordt voorafgezet op de server.

Voor meer informatie, zie Services aan de clientzijde die niet worden opgelost tijdens het prerendering.

Vooraf gerrendeerde gegevens

Bij het prerendeeren worden onderdelen twee keer weergegeven: eerst statisch en interactief. Status stroomt niet automatisch van het vooraf gegenereerde onderdeel naar de interactieve component. Als een component asynchrone initialisatiebewerkingen uitvoert en tijdens de initialisatie verschillende inhoud voor verschillende statussen rendert, zoals 'Laden...' als voortgangsindicator, kan je een flikkering zien wanneer het component twee keer wordt gerenderd.

U kunt dit oplossen door de vooraf gegenereerde status te laten stromen met behulp van de PERSISTENT Component State-API, die de BlazorWebAppCallWebApi en BlazorWebAppCallWebApi_Weathervoorbeeld-apps demonstreren. Wanneer het onderdeel interactief wordt weergegeven, kan het op dezelfde manier worden weergegeven met dezelfde status. De API werkt momenteel echter niet met verbeterde navigatie, die u kunt omzeilen door verbeterde navigatie uit te schakelen op koppelingen naar de pagina (data-enhanced-nav=false). Zie de volgende bronnen voor meer informatie:

De `HttpClient`-service toevoegen

De richtlijnen in deze sectie zijn van toepassing op scenario's aan de clientzijde.

Onderdelen aan de clientzijde roepen web-API's aan met behulp van een vooraf geconfigureerde HttpClient-service, die is gericht op het terugbrengen van aanvragen naar de server van herkomst. Aanvullende HttpClient-serviceconfiguraties voor andere web-API's kunnen worden gemaakt in ontwikkelaarscode. Aanvragen worden samengesteld met behulp van Blazor JSON-helpers of met HttpRequestMessage. Aanvragen kunnen Fetch API- optieconfiguratie bevatten.

De configuratievoorbeelden in deze sectie zijn alleen nuttig wanneer één web-API wordt aangeroepen voor één HttpClient exemplaar in de app. Wanneer de app meerdere web-API's moet aanroepen, elk met een eigen basisadres en -configuratie, kunt u de volgende benaderingen gebruiken, die verderop in dit artikel worden behandeld:

benoemde HttpClient met IHttpClientFactory: elke web-API krijgt een unieke naam. Wanneer app-code of een Razor-onderdeel een web-API aanroept, wordt een benoemd HttpClient exemplaar gebruikt om de aanroep uit te voeren.
getypeerd HttpClient: Elke web-API is getypeerd. Wanneer app-code of een Razor-onderdeel een web-API aanroept, wordt een getypt HttpClient exemplaar gebruikt om de aanroep uit te voeren.

Voeg in het bestand Program een HttpClient-service toe als deze nog niet aanwezig is vanuit een Blazor projectsjabloon die wordt gebruikt om de app te maken:

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

In het voorgaande voorbeeld wordt het basisadres ingesteld met builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), waarmee het basisadres voor de app wordt opgehaald en doorgaans wordt afgeleid van de href waarde van de <base> tag op de hostpagina.

De meest voorkomende gebruiksvoorbeelden voor het gebruik van het eigen basisadres van de client zijn:

Het clientproject (.Client) van een Blazor Web App (.NET 8 of hoger) maakt web-API-aanroepen van WebAssembly-onderdelen of -code die wordt uitgevoerd op de client in WebAssembly naar API's in de server-app.
Het clientproject (Client) van een gehoste Blazor WebAssembly-app maakt web-API-aanroepen naar het serverproject (Server). Houd er rekening mee dat de gehoste Blazor WebAssembly projectsjabloon niet meer beschikbaar is in .NET 8 of hoger. Gehoste Blazor WebAssembly-apps blijven echter ondersteund voor .NET 8.

Als u een externe web-API aanroept (niet in dezelfde URL-ruimte als de client-app), stelt u de URI in op het basisadres van de web-API. In het volgende voorbeeld wordt het basisadres van de web-API ingesteld op https://localhost:5001, waarbij een afzonderlijke web-API-app wordt uitgevoerd en klaar is om te reageren op aanvragen van de client-app:

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

JSON-hulpmiddelen

HttpClient is beschikbaar als een vooraf geconfigureerde service voor het terugsturen van aanvragen naar de oorspronkelijke server.

HttpClient en JSON-helpers (System.Net.Http.Json.HttpClientJsonExtensions) worden ook gebruikt om web-API-eindpunten van derden aan te roepen. HttpClient wordt geïmplementeerd met behulp van de Fetch API- van de browser en is onderhevig aan de beperkingen, waaronder het afdwingen van hetzelfde origin-beleid, dat verderop in dit artikel wordt besproken in de sectie Cross-Origin Resource Sharing (CORS).

Het basisadres van de client wordt ingesteld op het adres van de oorspronkelijke server. Injecteer een HttpClient-exemplaar in een component met behulp van de @inject-richtlijn.

@using System.Net.Http
@inject HttpClient Http

Gebruik de System.Net.Http.Json-naamruimte voor toegang tot HttpClientJsonExtensions, inclusief GetFromJsonAsync, PutAsJsonAsyncen PostAsJsonAsync:

@using System.Net.Http.Json

In de volgende secties worden JSON-helpers behandeld:

GET
POST
PUT-
PATCH

System.Net.Http bevat aanvullende methoden voor het verzenden van HTTP-aanvragen en het ontvangen van HTTP-antwoorden, bijvoorbeeld om een DELETE-aanvraag te verzenden. Zie de sectie DELETE en aanvullende uitbreidingsmethoden voor meer informatie.

GET uit JSON (`GetFromJsonAsync`)

GetFromJsonAsync een HTTP GET-aanvraag verzendt en de hoofdtekst van het JSON-antwoord parseert om een object te maken.

In de volgende componentcode worden de todoItems door de component weergegeven. GetFromJsonAsync wordt aangeroepen wanneer het onderdeel zijn initialisatie heeft voltooid (OnInitializedAsync).

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

POST als JSON (`PostAsJsonAsync`)

PostAsJsonAsync verzendt een POST-aanvraag naar de opgegeven URI die de waarde bevat die is geserialiseerd als JSON in de aanvraagbody.

In de volgende onderdeelcode wordt newItemName geleverd door een afhankelijk element van het onderdeel. De methode AddItem wordt geactiveerd door een <button> element te selecteren.

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

PostAsJsonAsync retourneert een HttpResponseMessage. Als u de JSON-inhoud van het antwoordbericht wilt deserialiseren, gebruikt u de ReadFromJsonAsync-extensiemethode. In het volgende voorbeeld worden JSON-weergegevens als een matrix gelezen:

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

PUT als JSON (`PutAsJsonAsync`)

PutAsJsonAsync verzendt een HTTP PUT-aanvraag met JSON-gecodeerde inhoud.

In de volgende onderdeelcode worden editItem waarden voor Name en IsCompleted geleverd door afhankelijke elementen van het onderdeel. Het Id van het item wordt ingesteld wanneer het item is geselecteerd in een ander deel van de gebruikersinterface (niet weergegeven) en EditItem wordt aangeroepen. De methode SaveItem wordt geactiveerd door het element <button> te selecteren. In het volgende voorbeeld wordt het laden van todoItems niet weergegeven voor beknoptheid. Zie de GET van JSON (GetFromJsonAsync) sectie voor een voorbeeld van het laden van items.

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

PutAsJsonAsync retourneert een HttpResponseMessage. Als u de JSON-inhoud van het antwoordbericht wilt deserialiseren, gebruikt u de ReadFromJsonAsync-extensiemethode. In het volgende voorbeeld worden JSON-weergegevens als een matrix gelezen:

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

PATCH als JSON (`PatchAsJsonAsync`)

PatchAsJsonAsync verzendt een HTTP PATCH-aanvraag met JSON-gecodeerde inhoud.

Notitie

Zie JsonPatch in ASP.NET Core-web-API-voor meer informatie.

In het volgende voorbeeld ontvangt PatchAsJsonAsync een JSON PATCH-document als een platte tekst tekenreeks met geëscapte aanhalingstekens.

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

PatchAsJsonAsync retourneert een HttpResponseMessage. Als u de JSON-inhoud van het antwoordbericht wilt deserialiseren, gebruikt u de ReadFromJsonAsync-extensiemethode. In het volgende voorbeeld worden JSON-todo-itemgegevens gelezen als een matrix. Er wordt een lege matrix gemaakt als er geen itemgegevens worden geretourneerd door de methode, dus content niet null is nadat de instructie is uitgevoerd:

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

Het niet-gecodeerde PATCH-document wordt weergegeven als de volgende JSON met inspringing, spatiëring en ongescapte aanhalingstekens.

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

Ter vereenvoudiging van het maken van PATCH-documenten in de app die PATCH-aanvragen uitgeven, kan een app .NET JSON PATCH-ondersteuning gebruiken, zoals in de volgende richtlijnen wordt beschreven.

Installeer het Microsoft.AspNetCore.JsonPatch NuGet-pakket en gebruik de API-functies van het pakket om een JsonPatchDocument op te stellen voor een PATCH-aanvraag.

Notitie

Zie de artikelen onder Pakketten installeren en beheren in Werkstroom voor pakketconsumptie (NuGet-documentatie)voor richtlijnen bij het toevoegen van pakketten aan .NET-apps. Bevestig de juiste pakketversies op NuGet.org.

Voeg @using instructies toe voor de System.Text.Json, System.Text.Json.Serializationen Microsoft.AspNetCore.JsonPatch naamruimten boven aan het onderdeel Razor:

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

Stel de JsonPatchDocument samen voor een TodoItem, met IsComplete ingesteld op true, met de methode Replace.

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

Geef de bewerkingen van het document (patchDocument.Operations) door aan de PatchAsJsonAsync oproep:

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

JsonSerializerOptions.DefaultIgnoreCondition is ingesteld op JsonIgnoreCondition.WhenWritingDefault om een eigenschap alleen te negeren als deze gelijk is aan de standaardwaarde voor het type.

Voeg JsonSerializerOptions.WriteIndented in, ingesteld op true, als u de JSON-gegevens in een aangenaam formaat voor vertoning wilt presenteren. Het schrijven van ingesprongen JSON heeft geen invloed op het verwerken van PATCH-aanvragen en wordt meestal niet uitgevoerd in productie-apps voor web-API-aanvragen.

Volg de richtlijnen in de JsonPatch in ASP.NET Core-web-API artikel om een PATCH-controlleractie toe te voegen aan de web-API. U kunt ook PATCH-aanvraagverwerking implementeren als een minimale API- met de volgende stappen.

Voeg een pakketreferentie voor het Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet-pakket toe aan de web-API-app.

Notitie

Het is niet nodig om een pakketverwijzing voor het Microsoft.AspNetCore.JsonPatch-pakket toe te voegen aan de app, omdat de verwijzing naar het Microsoft.AspNetCore.Mvc.NewtonsoftJson pakket automatisch transitief een pakketverwijzing voor Microsoft.AspNetCore.JsonPatchtoevoegt.

Voeg in het bestand Program een @using-instructie toe voor de Microsoft.AspNetCore.JsonPatch naamruimte:

using Microsoft.AspNetCore.JsonPatch;

Geef het eindpunt op voor de aanvraagverwerkingspijplijn van de web-API:

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();
});

Waarschuwing

Net als bij de andere voorbeelden in de JsonPatch in ASP.NET Core-web-API artikel, beschermt de voorgaande PATCH-API de web-API niet tegen overpostingsaanvallen. Zie Zelfstudie: Een web-API maken met ASP.NET Corevoor meer informatie.

Zie de BlazorWebAppCallWebApivoorbeeld-appvoor een volledig werkende PATCH-ervaring.

DELETE (`DeleteAsync`) en aanvullende uitbreidingsmethoden

System.Net.Http bevat aanvullende uitbreidingsmethoden voor het verzenden van HTTP-aanvragen en het ontvangen van HTTP-antwoorden. HttpClient.DeleteAsync wordt gebruikt om een HTTP DELETE-aanvraag naar een web-API te verzenden.

In de volgende onderdeelcode roept het <button> element de methode DeleteItem aan. Het afhankelijke element <input> levert de id van het item dat moet worden verwijderd.

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

Genoemd `HttpClient` met `IHttpClientFactory`

IHttpClientFactory services en de configuratie van een benoemde HttpClient worden ondersteund.

Notitie

Een alternatief voor het gebruik van een benoemde HttpClient van een IHttpClientFactory is het gebruik van een getypte HttpClient. Zie de Getypte HttpClient sectie voor meer informatie.

Voeg het Microsoft.Extensions.Http NuGet-pakket toe aan de app.

Notitie

Raadpleeg de artikelen onder Pakketten installeren en beheren in de Package consumption workflow (NuGet-documentatie)voor hulp bij het toevoegen van pakketten aan .NET-apps. Bevestig de juiste pakketversies op NuGet.org.

In het Program-bestand van een clientproject:

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

Als de benoemde client moet worden gebruikt door voor-gerenderde client-side onderdelen van een Blazor Web App, moet de voorgaande serviceregistratie voorkomen in zowel het serverproject als het .Client-project. Op de server wordt builder.HostEnvironment.BaseAddress vervangen door het basisadres van de web-API, zoals hieronder wordt beschreven.

In het voorgaande voorbeeld aan de clientzijde wordt het basisadres ingesteld met builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), waarmee het basisadres voor de app aan de clientzijde wordt opgehaald en doorgaans wordt afgeleid van de href-waarde van de <base> tag op de hostpagina.

De meest voorkomende gebruiksvoorbeelden voor het gebruik van het eigen basisadres van de client zijn:

Het clientproject (.Client) van een Blazor Web App die web-API-aanroepen uitvoert vanuit WebAssembly/Auto-onderdelen of code die wordt uitgevoerd op de client in WebAssembly naar API's in de server-app op hetzelfde hostadres.
Het clientproject (Client) van een gehoste Blazor WebAssembly-app waarmee web-API-aanroepen worden uitgevoerd naar het serverproject (Server).

De meest voorkomende use-case voor het gebruik van het eigen basisadres van de client bevindt zich in het clientproject (Client) van een gehoste Blazor WebAssembly-app waarmee web-API-aanroepen worden uitgevoerd naar het serverproject (Server).

Als u een externe web-API aanroept (niet in dezelfde URL-ruimte als de client-app) of als u de services configureert in een app aan de serverzijde (bijvoorbeeld om te gaan met het voorbereiden van onderdelen aan de clientzijde op de server), stelt u de URI in op het basisadres van de web-API. In het volgende voorbeeld wordt het basisadres van de web-API ingesteld op https://localhost:5001, waarbij een afzonderlijke web-API-app wordt uitgevoerd en klaar is om te reageren op aanvragen van de client-app:

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

In de volgende onderdeelcode:

Een exemplaar van IHttpClientFactory maakt een HttpClientmet een naam.
De aanduiding HttpClient wordt gebruikt voor het verzenden van een GET-aanvraag voor JSON-weersvoorspellinggegevens van de web-API bij /forecast.

@inject IHttpClientFactory ClientFactory

...

@code {
    private Forecast[]? forecasts;

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

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

De BlazorWebAppCallWebApivoorbeeld-app demonstreert het aanroepen van een web-API met een benoemde HttpClient in het CallTodoWebApiCsrNamedClient-onderdeel. Zie Graph API gebruiken met ASP.NET Core Blazor WebAssemblyvoor een extra werkende demonstratie in een client-app op basis van het aanroepen van Microsoft Graph met een benoemde HttpClient.

Voor een werkende demonstratie in een client-app die gebaseerd is op het aanroepen van Microsoft Graph met een genaamde HttpClient, zie Graph API gebruiken met ASP.NET Core Blazor WebAssembly.

Getypte `HttpClient`

Type HttpClient gebruikt een of meer van de HttpClient instanties van de app, standaard of benoemd, om gegevens terug te geven van een of meer web-API-eindpunten.

Notitie

Een alternatief voor het gebruik van een getypte HttpClient is het gebruik van een benoemde HttpClient van een IHttpClientFactory. Zie de sectie Benoemde HttpClient met IHttpClientFactory voor meer informatie.

Voeg het Microsoft.Extensions.Http NuGet-pakket toe aan de app.

Notitie

Zie de artikelen onder Installeren en beheren van pakketten in de workflow voor pakketconsumptie (NuGet-documentatie) voor hulp bij het toevoegen van pakketten aan .NET-apps. Bevestig de juiste pakketversies op NuGet.org.

In het volgende voorbeeld wordt een GET-aanvraag voor JSON-weersvoorspellingsgegevens van de web-API op /forecastweergegeven.

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") ?? [];
}

In het Program-bestand van een clientproject:

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

Als de getypte client moet worden gebruikt door voorrenderde client-side componenten van een Blazor Web App, moet de voorgaande serviceregistratie worden weergegeven in zowel het serverproject als het .Client project. Op de server wordt builder.HostEnvironment.BaseAddress vervangen door het basisadres van de web-API, zoals hieronder wordt beschreven.

In het voorgaande voorbeeld wordt het basisadres ingesteld met builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress), waarmee het basisadres voor de app aan de clientzijde wordt opgehaald en doorgaans wordt afgeleid van de href-waarde van de <base> tag op de hostpagina.

De meest voorkomende gebruiksvoorbeelden voor het gebruik van het eigen basisadres van de client zijn:

Het clientproject (.Client) van een Blazor Web App die web-API-aanroepen uitvoert vanuit WebAssembly/Auto-onderdelen of code die wordt uitgevoerd op de client in WebAssembly naar API's in de server-app op hetzelfde hostadres.
Het clientproject (Client) van een gehoste Blazor WebAssembly-app waarmee web-API-aanroepen worden uitgevoerd naar het serverproject (Server).

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

Onderdelen injecteren de getypte HttpClient om de web-API aan te roepen.

In de volgende onderdeelcode:

Een exemplaar van de voorgaande ForecastHttpClient wordt geïnjecteerd, wat resulteert in een getypeerde HttpClient.
De getypte HttpClient wordt gebruikt voor het uitgeven van een GET-aanvraag voor JSON-weervoorspellingsgegevens van de web-API.

@inject ForecastHttpClient Http

...

@code {
    private Forecast[]? forecasts;

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

De BlazorWebAppCallWebApivoorbeeld-app demonstreert het aanroepen van een web-API met een getypte HttpClient in het CallTodoWebApiCsrTypedClient onderdeel. Houd er rekening mee dat het onderdeel client-side rendering (CSR) hanteert (InteractiveWebAssembly rendermodus) met prerendering, zodat de getypeerde clientserviceregistratie wordt weergegeven in het Program-bestand van zowel het serverproject als het .Client-project.

De richtlijnen in deze sectie zijn van toepassing op scenario's aan de clientzijde die afhankelijk zijn van een verificatie-cookie.

Voor cookie-gebaseerde verificatie, die als veiliger wordt beschouwd dan bearer-tokenverificatie, kunnen cookie referenties worden verzonden met elke web-API-aanvraag door AddHttpMessageHandler aan te roepen met een DelegatingHandler op een vooraf geconfigureerde HttpClient. De handler configureert SetBrowserRequestCredentials met BrowserRequestCredentials.Include, die de browser adviseert referenties te verzenden bij elke aanvraag, zoals cookies of HTTP-verificatieheaders, waaronder voor cross-origin-aanvragen.

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);
    }
}

De CookieHandler is geregistreerd in het bestand Program:

builder.Services.AddTransient<CookieHandler>();

De berichthandler wordt toegevoegd aan alle vooraf geconfigureerde HttpClient waarvoor cookie verificatie is vereist:

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

Zie Secure ASP.NET Core Blazor WebAssembly met ASP.NET Core Identityvoor een demonstratie.

Wanneer u een HttpRequestMessageopstelt, stelt u de inloggegevens en de header van de browseraanvraag direct in.

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

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

`HttpClient` en `HttpRequestMessage` met Fetch API aanvraagopties

De richtlijnen in deze sectie zijn van toepassing op scenario's aan de clientzijde die afhankelijk zijn van bearer-tokenverificatie.

HttpClient (API-documentatie) en HttpRequestMessage kunnen worden gebruikt om aanvragen aan te passen. U kunt bijvoorbeeld de HTTP-methode en aanvraagheaders opgeven. Het volgende onderdeel maakt een POST aanvraag naar een web-API-eindpunt en toont de hoofdtekst van het antwoord.

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; }
    }
}

Blazor's clientimplementatie van HttpClient maakt gebruik van de Fetch-API en configureert de specifieke Fetch-API-opties voor aanvragen via HttpRequestMessage extensiemethoden en WebAssemblyHttpRequestMessageExtensions. Stel aanvullende opties in met behulp van de algemene SetBrowserRequestOption extensiemethode. Blazor en de onderliggende Fetch API voegen niet rechtstreeks aanvraagheaders toe en wijzigen deze ook niet. Raadpleeg de documentatiesets voor externe gebruikersagenten en andere webresources voor meer informatie over hoe gebruikersagents, zoals browsers, interactie hebben met headers.

Het HTTP-antwoord wordt doorgaans gebufferd om ondersteuning in te schakelen voor synchrone leesbewerkingen op de antwoordinhoud. Als u ondersteuning voor antwoordstreaming wilt inschakelen, gebruikt u de SetBrowserResponseStreamingEnabled-extensiemethode voor de aanvraag.

Als u referenties wilt opnemen in een cross-origin-aanvraag, gebruikt u de SetBrowserRequestCredentials-extensiemethode:

requestMessage.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);

Zie MDN-webdocumenten: WindowOrWorkerGlobalScope.fetch(): Parametersvoor meer informatie over fetch-API-opties.

Fouten verwerken

Afhandelen van web-API-responsfouten in ontwikkelaarscode wanneer deze optreden. Bijvoorbeeld, GetFromJsonAsync verwacht een JSON-antwoord van de web-API met een Content-Type van application/json. Als het antwoord niet de JSON-indeling heeft, genereert inhoudsvalidatie een NotSupportedException.

In het volgende voorbeeld is het URI-eindpunt voor de gegevensaanvraag voor weersvoorspelling onjuist gespeld. De URI zou WeatherForecast moeten zijn, maar verschijnt in de oproep als WeatherForcast, waar de letter e ontbreekt in Forecast.

De GetFromJsonAsync-aanroep verwacht dat JSON wordt geretourneerd, maar de web-API retourneert HTML voor een niet-verwerkte uitzondering met een Content-Type van text/html. De niet-verwerkte uitzondering treedt op omdat het pad naar /WeatherForcast niet is gevonden en middleware geen pagina of weergave voor de aanvraag kan leveren.

In OnInitializedAsync op de client wordt NotSupportedException geworpen wanneer de antwoordinhoud wordt gevalideerd als niet-JSON. De uitzondering wordt gevangen in het catch blok, waarbij aangepaste logica de fout kan vastleggen of een beschrijvend foutbericht aan de gebruiker kan weergeven.

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;
        }
    }
}

Notitie

Het voorgaande voorbeeld is bedoeld voor demonstratiedoeleinden. Een web-API kan worden geconfigureerd om JSON te retourneren, zelfs wanneer er geen eindpunt bestaat of als er een onverwerkte uitzondering op de server optreedt.

Zie Fouten afhandelen in ASP.NET Core Blazor-appsvoor meer informatie.

Browserbeveiliging beperkt vaak dat een webpagina verzoeken doet naar een andere oorsprong dan degene die de webpagina bediende. Deze beperking wordt het same-origin-beleidgenoemd. Het beleid voor dezelfde oorsprong beperkt (maar verhindert niet) dat een kwaadwillende site gevoelige gegevens van een andere site leest. Als u aanvragen wilt indienen van de browser naar een eindpunt met een andere oorsprong, moet het eindpuntCORS-(Cross-Origin Resource Sharing) inschakelen.

Zie Cross-Origin Requests (CORS) inschakelen in ASP.NET Corevoor meer informatie over CORS aan de serverzijde. De voorbeelden van het artikel hebben niet rechtstreeks betrekking op Razor onderdeelscenario's, maar het artikel is handig voor het leren van algemene CORS-concepten.

Zie ASP.NET Core Blazor WebAssembly aanvullende beveiligingsscenario'svoor informatie over CORS-aanvragen aan de clientzijde.

Ondersteuning voor antivervalsing

Als u antivervalsingsondersteuning wilt toevoegen aan een HTTP-aanvraag, injecteert u de AntiforgeryStateProvider en voegt u een RequestToken toe aan de verzameling headers als een RequestVerificationToken:

@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);
    ...
}

Zie ASP.NET Core Blazor verificatie- en autorisatie-voor meer informatie.

voorbeelden van Blazor frameworkonderdelen voor het testen van web-API-toegang

Verschillende netwerkhulpprogramma's zijn openbaar beschikbaar voor het rechtstreeks testen van back-end-apps voor web-API's, zoals Firefox Browser Developer. de referentiebron van Blazor framework bevat HttpClient testassets die nuttig zijn voor het testen:

HttpClientTest assets in de dotnet/aspnetcore GitHub-opslagplaats

Notitie

Documentatiekoppelingen naar .NET-referentiebron laden meestal de standaardbranch van de opslagplaats, die de huidige ontwikkeling vertegenwoordigt voor de volgende release van .NET. Als u een tag voor een specifieke release wilt selecteren, gebruikt u de Switch-vertakkingen of tags vervolgkeuzelijst. Zie Een versietag selecteren van ASP.NET Core-broncode (dotnet/AspNetCore.Docs #26205)voor meer informatie.

Aanvullende informatiebronnen

Algemeen

Cross-Origin Resource Sharing (CORS) bij W3C
Cross-Origin Requests (CORS) inschakelen in ASP.NET Core: Hoewel de inhoud van toepassing is op ASP.NET Core-apps, niet Razor onderdelen, wordt in het artikel algemene CORS-concepten behandeld.

Mitigatie van overpostingaanvallen

Web-API's kunnen kwetsbaar zijn voor een overposting aanval, ook wel een massatoewijzing aanval genoemd. Er treedt een overpostingsaanval op wanneer een kwaadwillende gebruiker een HTML-formulierPOST uitgeeft aan de server die gegevens verwerkt voor eigenschappen die geen deel uitmaken van het gerenderde formulier en die de ontwikkelaar niet toestaat dat gebruikers deze kunnen wijzigen. De term 'overposting' betekent letterlijk dat de kwaadwillende gebruiker bovenheeft gepost met behulp van het formulier.

Voor hulp bij het beperken van overpostingaanvallen, zie handleiding: Een web-API maken met ASP.NET Core.

Aan de serverkant

ASP.NET Core serverzijde en Blazor Web App aanvullende beveiligingsscenario's: bevat dekking voor het gebruik van HttpClient om beveiligde web-API-aanvragen te maken.
HTTP-aanvragen maken met behulp van IHttpClientFactory in ASP.NET Core
HTTPS afdwingen in ASP.NET Core
Kestrel configuratie van HTTPS-eindpunten

Clientzijde

ASP.NET Core Blazor WebAssembly aanvullende beveiligingsscenario's: bevat dekking voor het gebruik van HttpClient om beveiligde web-API-aanvragen te maken.
Graph API gebruiken met ASP.NET Core Blazor WebAssembly
API- ophalen

Delen via

Een web-API aanroepen vanuit ASP.NET Core Blazor

Pakket

Voorbeeld-apps

`BlazorWebAppCallWebApi`

`BlazorWebAppCallWebApi_Weather`

`BlazorWebAssemblyCallWebApi`

Scenario's aan de clientzijde voor het aanroepen van externe web-API's

Scenario's aan de serverzijde voor het aanroepen van externe web-API's

Serviceabstracties voor web-API-aanroepen

Blazor Web App externe web-API's

Vooraf gerrendeerde gegevens

De `HttpClient`-service toevoegen

JSON-hulpmiddelen

GET uit JSON (`GetFromJsonAsync`)

POST als JSON (`PostAsJsonAsync`)

PUT als JSON (`PutAsJsonAsync`)

PATCH als JSON (`PatchAsJsonAsync`)

DELETE (`DeleteAsync`) en aanvullende uitbreidingsmethoden

Genoemd `HttpClient` met `IHttpClientFactory`

Getypte `HttpClient`

`HttpClient` en `HttpRequestMessage` met Fetch API aanvraagopties

Fouten verwerken

Ondersteuning voor antivervalsing

voorbeelden van Blazor frameworkonderdelen voor het testen van web-API-toegang

Aanvullende informatiebronnen

Algemeen

Mitigatie van overpostingaanvallen

Aan de serverkant

Clientzijde

Aanvullende resources

Delen via

Een web-API aanroepen vanuit ASP.NET Core Blazor

Pakket

Voorbeeld-apps

BlazorWebAppCallWebApi

BlazorWebAppCallWebApi_Weather

BlazorWebAssemblyCallWebApi

Scenario's aan de clientzijde voor het aanroepen van externe web-API's

Scenario's aan de serverzijde voor het aanroepen van externe web-API's

Serviceabstracties voor web-API-aanroepen

Blazor Web App externe web-API's

Vooraf gerrendeerde gegevens

De HttpClient-service toevoegen

JSON-hulpmiddelen

GET uit JSON (GetFromJsonAsync)

POST als JSON (PostAsJsonAsync)

PUT als JSON (PutAsJsonAsync)

PATCH als JSON (PatchAsJsonAsync)

DELETE (DeleteAsync) en aanvullende uitbreidingsmethoden

Genoemd HttpClient met IHttpClientFactory

Getypte HttpClient

Cookie-gebaseerde aanvraagreferenties

HttpClient en HttpRequestMessage met Fetch API aanvraagopties

Fouten verwerken

CORS (Delen van middelen over verschillende oorsprongen)

Ondersteuning voor antivervalsing

voorbeelden van Blazor frameworkonderdelen voor het testen van web-API-toegang

Aanvullende informatiebronnen

Algemeen

Mitigatie van overpostingaanvallen

Aan de serverkant

Clientzijde

Aanvullende resources

`BlazorWebAppCallWebApi`

`BlazorWebAppCallWebApi_Weather`

`BlazorWebAssemblyCallWebApi`

De `HttpClient`-service toevoegen

GET uit JSON (`GetFromJsonAsync`)

POST als JSON (`PostAsJsonAsync`)

PUT als JSON (`PutAsJsonAsync`)

PATCH als JSON (`PatchAsJsonAsync`)

DELETE (`DeleteAsync`) en aanvullende uitbreidingsmethoden

Genoemd `HttpClient` met `IHttpClientFactory`

Getypte `HttpClient`

`HttpClient` en `HttpRequestMessage` met Fetch API aanvraagopties