ASP.NET Core Blazor から Web API を呼び出す

この記事では、Blazor アプリから Web API を呼び出す方法について説明します。

Package

System.Net.Http.Json パッケージには、System.Text.Json を使用した自動シリアル化と逆シリアル化を実行する System.Net.Http.HttpClient と System.Net.Http.HttpContent の拡張メソッドが用意されています。 System.Net.Http.Json パッケージは .NET 共有フレームワークによって提供され、アプリへのパッケージ参照を追加する必要はありません。

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

外部 Web API を呼び出すためのサーバー側のシナリオ

サーバーベースのコンポーネントからは HttpClient インスタンス (通常、IHttpClientFactory を使用して作成されます) を使用して外部 Web API を呼び出します。 サーバー側アプリに適用されるガイダンスについては、「ASP.NET Core で IHttpClientFactory を使用して HTTP 要求を行う」を参照してください。

サーバー側アプリには、HttpClient サービスが含まれません。 HttpClient ファクトリ インフラストラクチャを使用して、アプリに HttpClient を提供します。

Program ファイルで次の操作を行います。

builder.Services.AddHttpClient();

次の Razor コンポーネントでは、「ASP.NET Core で IHttpClientFactory を使用して HTTP 要求を行う」の記事の「基本的な使用方法」の例に似た GitHub ブランチの Web API に要求を行います。

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

C# 12 以降の前の例では、branches 変数のために空の配列 ([]) が作成されています。 以前のバージョンの C# では、空の配列 (Array.Empty<GitHubBranch>()) を作成します。

その他の実際の例については、「ASP.NET Core Blazor ファイルのアップロード」の Web API コントローラーにファイルをアップロードするサーバー側ファイル アップロードの例を参照してください。

HttpClient サービスを追加する

このセクションのガイダンスは、クライアント側のシナリオに適用されます。

クライアント側コンポーネントは、事前に構成された HttpClient サービスを使用して Web API を呼び出します。このサービスは、元のサーバーに要求を行うことに重点を置いています。 他の Web API 用の追加の HttpClient サービス構成は、開発者コードで作成できます。 要求は、Blazor JSON ヘルパーを使用して、または HttpRequestMessage で構成されます。 要求には、Fetch API オプションの構成を含めることができます。

このセクションの構成例は、アプリ内の 1 つの HttpClient インスタンスに対して 1 つの Web API が呼び出される場合にのみ役立ちます。 アプリで複数の Web API を呼び出す必要がある場合は、それぞれ独自のベース アドレスと構成を使用します。その場合、この記事の後半で説明する方法を採用できます。

• IHttpClientFactory を使用する名前付き HttpClient: 各 Web API には一意の名前が付けられます。 アプリ コードまたは Razor コンポーネントが Web API を呼び出すと、名前付き HttpClient インスタンスを使用して呼び出しが行われます。
• 型指定 HttpClient: 各 Web API が型指定されます。 アプリ コードまたは Razor コンポーネントが Web API を呼び出すと、型指定 HttpClient インスタンスを使用して呼び出しが行われます。

Program ファイルで、アプリの作成に使用した Blazor プロジェクト テンプレートから HttpClient サービスを追加します (このサービスが存在していない場合)。

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

上記の例では、ベース アドレスの設定に builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) を使っています。これを使って、アプリのベース アドレス (通常は、ホスト ページの <base> タグの href 値に由来します) を取得できます。

クライアント独自のベース アドレスを使用する最も一般的なユース ケースは次のとおりです。

• Blazor Web App (.NET 8 以降) のクライアント プロジェクト (.Client) は、WebAssembly のクライアントで実行される WebAssembly コンポーネントまたはコードから、サーバー アプリの API への Web API 呼び出しを行います。
• ホストされている Blazor WebAssembly アプリのクライアント プロジェクト (Client) は、サーバー プロジェクト (Server) に対して Web API 呼び出しを行います。 ホストされている Blazor WebAssembly プロジェクト テンプレートは、.NET 8 以降では使用できなくなりました。 ただし、ホストされている Blazor WebAssembly アプリは .NET 8 で引き続きサポートされます。

外部 Web API (クライアント アプリと同じ URL 空間にない) を呼び出す場合は、URI を Web API のベース アドレスに設定します。 次の例では、Web API のベース アドレスを https://localhost:5001 に設定します。これは、別の Web API アプリが実行される場所で、クライアント アプリからの要求に応答する準備ができています。

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

JSON ヘルパー

HttpClient は、元のサーバーに対して要求を行うための構成済みのサービスとして用意されています。

HttpClient と JSON のヘルパー (System.Net.Http.Json.HttpClientJsonExtensions) は、サード パーティの Web API エンドポイントを呼び出すためにも使用されます。 HttpClient は、ブラウザーの Fetch API を使用して実装され、同一オリジン ポリシーの適用など、制限の対象となります。これについては、この記事の「クロスオリジン リソース共有 (CORS)」セクションで後述します。

クライアントのベース アドレスは、生成元のサーバーのアドレスに設定されます。 @inject ディレクティブを使用して HttpClient インスタンスをコンポーネントに挿入します。

@using System.Net.Http
@inject HttpClient Http

HttpClientJsonExtensions にアクセスするには、System.Net.Http.Json 名前空間を使用します。これには、GetFromJsonAsync、PutAsJsonAsync、および PostAsJsonAsync が含まれます。

@using System.Net.Http.Json

次のセクションでは、JSON ヘルパーについて説明します。

• GET
• 投稿
• PUT
• PATCH

System.Net.Http には、HTTP 要求を送信し、HTTP 応答を受信する (たとえば DELETE 要求を送信する) ための追加のメソッドが含まれています。 詳細については、「DELETE とその他の拡張メソッド」セクションを参照してください。

JSON から取得する (GetFromJsonAsync)

GetFromJsonAsync は、HTTP GET 要求を送信し、JSON 応答本文を解析してオブジェクトを作成します。

次のコンポーネント コードでは、コンポーネントによって todoItems が表示されます。 GetFromJsonAsync は、コンポーネントの初期化が完了すると呼び出されます (OnInitializedAsync)。

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

JSON として投稿する (PostAsJsonAsync)

PostAsJsonAsync は、要求本文に JSON としてシリアル化された値が含まれる POST 要求を、指定された URI に送信します。

次のコンポーネント コードでは、コンポーネントのバインドされた要素によって newItemName が提供されています。 AddItem メソッドは、<button> 要素を選択することにでトリガーされます。

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

PostAsJsonAsync では HttpResponseMessage が返されます。 応答メッセージから JSON コンテンツを逆シリアル化するには、ReadFromJsonAsync 拡張メソッドを使用します。 次の例では、JSON の気象データを配列として読み取ります。

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

JSON として配置する (PutAsJsonAsync)

PutAsJsonAsync は、JSON でエンコードされたコンテンツを含む HTTP PUT 要求を送信します。

次のコンポーネント コードでは、Name および IsCompleted の editItem 値が、コンポーネントのバインドされた要素によって提供されています。 項目の Id は、UI の別の部分 (表示されない) で項目が選択され、EditItem が呼び出されたときに設定されます。 SaveItem メソッドは、<button> 要素を選択することでトリガーされます。 次の例では、簡潔にするために todoItems の読み込みを示していません。 項目の読み込み例については、「JSON からの GET (GetFromJsonAsync)」セクションをご覧ください。

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

PutAsJsonAsync では HttpResponseMessage が返されます。 応答メッセージから JSON コンテンツを逆シリアル化するには、ReadFromJsonAsync 拡張メソッドを使用します。 次の例では、JSON の気象データを配列として読み取ります。

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) およびその他の拡張メソッド

System.Net.Http には、HTTP 要求を送信し、HTTP 応答を受信するための追加の拡張メソッドが含まれています。 HttpClient.DeleteAsync は、HTTP DELETE 要求を Web API に送信するために使用します。

次のコンポーネント コードでは、<button> 要素で DeleteItem メソッドを呼び出しています。 バインドされた <input> 要素では、削除する項目の id が提供されます。

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

IHttpClientFactory による名前付き HttpClient

IHttpClientFactory サービスおよび名前付き HttpClient の構成がサポートされています。

アプリに Microsoft.Extensions.Http NuGet パッケージを追加します。

クライアント プロジェクトの Program ファイルで、次のとおりです。

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

上記のクライアント側の例では、ベース アドレスの設定に builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) を使っています。これを使って、クライアント側アプリのベース アドレス (通常は、ホスト ページの <base> タグの href 値に由来します) を取得できます。

(クライアント アプリと同じ URL 空間ではなく) 外部 Web API を呼び出す場合、またはサーバー側アプリでサービスを構成している場合 (たとえば、サーバー上のクライアント側コンポーネントのプリレンダリングを処理する場合)、URI を Web API のベース アドレスに設定します。 次の例では、Web API のベース アドレスを https://localhost:5001 に設定します。これは、別の Web API アプリが実行される場所で、クライアント アプリからの要求に応答する準備ができています。

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

次のようなコンポーネント コードがあるとします。

• IHttpClientFactory のインスタンスによって、名前付きの HttpClient が作成されます。
• 名前付き HttpClient を使用して、/forecast の Web API から JSON の気象予報データの GET 要求が発行されます。

@inject IHttpClientFactory ClientFactory

...

@code {
    private Forecast[]? forecasts;

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

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

型指定された HttpClient

型指定された HttpClient では、1 つ以上のアプリの HttpClient インスタンス (既定または名前付き) を使用して、1 つ以上の Web API エンドポイントからデータを返します。

アプリに Microsoft.Extensions.Http NuGet パッケージを追加します。

次の例では、/forecast の Web API から JSON の気象予報データの GET 要求を発行します。

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

クライアント プロジェクトの Program ファイルで、次のとおりです。

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

上記の例では、ベース アドレスの設定に builder.HostEnvironment.BaseAddress (IWebAssemblyHostEnvironment.BaseAddress) を使っています。これを使って、クライアント側アプリのベース アドレス (通常は、ホスト ページの <base> タグの href 値に由来します) を取得できます。

(クライアント アプリと同じ URL 空間ではなく) 外部 Web API を呼び出す場合、またはサーバー側アプリでサービスを構成している場合 (たとえば、サーバー上のクライアント側コンポーネントのプリレンダリングを処理する場合)、URI を Web API のベース アドレスに設定します。 次の例では、Web API のベース アドレスを https://localhost:5001 に設定します。これは、別の Web API アプリが実行される場所で、クライアント アプリからの要求に応答する準備ができています。

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

コンポーネントによって型指定された HttpClient が挿入され、Web API が呼び出されます。

次のようなコンポーネント コードがあるとします。

• 前の ForecastHttpClient のインスタンスが挿入され、型指定された HttpClient を作成します。
• 型指定された HttpClient を使用して、 JSON の気象データの GET 要求が Web API から発行されます。

@inject ForecastHttpClient Http

...

@code {
    private Forecast[]? forecasts;

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

Cookie ベースの要求資格情報

このセクションのガイダンスは、認証 cookie に依存するクライアント側のシナリオに適用されます。

ベアラー トークン認証よりも安全性が高いとみなされる cookie ベースの認証では、構成済みの HttpClient で DelegatingHandler を指定して AddHttpMessageHandler を呼び出して、Web API 要求ごとに cookie 資格情報を送信できます。 ハンドラーは、BrowserRequestCredentials.Include を使用して SetBrowserRequestCredentials を構成します。これは、クロスオリジン要求を含む要求ごとに、Cookie や HTTP 認証ヘッダーなどの資格情報を送信するようにブラウザーに通知します。

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

CookieHandler は、次のように Program ファイルに登録されます。

builder.Services.AddTransient<CookieHandler>();

メッセージ ハンドラーは、cookie 認証を必要とするすべての構成済み HttpClient に次のように追加されます。

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

HttpRequestMessage を作成するときは、次のようにブラウザー要求の資格情報とヘッダーを直接設定します。

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

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

HttpClient および HttpRequestMessage と Fetch API 要求オプション

このセクションのガイダンスは、ベアラー トークン認証に依存するクライアント側のシナリオに適用されます。

HttpClient (API ドキュメント) と HttpRequestMessage を使用して、要求をカスタマイズすることができます。 たとえば、HTTP メソッドや要求ヘッダーを指定できます。 次のコンポーネントは、Web API エンドポイントに POST 要求を行い、応答本文を表示します。

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 のクライアント側の HttpClient 実装では、Fetch API を使用し、HttpRequestMessage 拡張メソッドと WebAssemblyHttpRequestMessageExtensions を介して、基盤となる 要求固有の Fetch API オプションを構成します。 汎用的な SetBrowserRequestOption 拡張メソッドを使用して、その他のオプションを設定できます。 Blazor と、基盤になる Fetch API は、要求ヘッダーを直接追加または変更しません。 ブラウザーなどのユーザー エージェントとヘッダーの対話方法の詳細については、外部ユーザー エージェントのドキュメント セットとその他の Web リソースを参照してください。

通常、HTTP 応答は、応答コンテンツでの同期読み取りのサポートを有効にするためにバッファリングされます。 応答ストリーミングのサポートを有効にするには、要求に対して SetBrowserResponseStreamingEnabled 拡張メソッドを使用します。

クロスオリジン要求に資格情報を含めるには、SetBrowserRequestCredentials 拡張メソッドを使用します。

requestMessage.SetBrowserRequestCredentials(BrowserRequestCredentials.Include);

Fetch API オプションの詳細については、「MDN Web ドキュメント: WindowOrWorkerGlobalScope (): パラメーター」を参照してください。

エラーの処理

Web API 応答エラーの発生時には、開発者コードでエラーを処理します。 たとえば、GetFromJsonAsync では、Content-Type が application/json である Web API からの JSON 応答が想定されています。 応答が JSON 形式ではない場合、コンテンツ検証により NotSupportedException がスローされます。

次の例では、天気予報データ要求の URI エンドポイントのスペルが間違っています。 URI は WeatherForecast である必要がありますが、呼び出しでは WeatherForcast として表示されます。これには、Forecast に文字 e がありません。

GetFromJsonAsync の呼び出しでは、JSON が返されることが想定されていますが、Content-Type が text/html の未処理の例外について、Web API から HTML が返されます。 /WeatherForcast へのパスが見つからず、ミドルウェアから要求のページまたはビューを提供できないため、未処理の例外が発生します。

クライアント上の OnInitializedAsync では、応答コンテンツが非 JSON であると検証されると NotSupportedException がスローされます。 例外は catch ブロックでキャッチされます。ここで、カスタム ロジックを使用してエラーをログに記録したり、わかりやすいエラー メッセージをユーザーに表示したりすることができます。

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

詳しくは、「ASP.NET Core Blazor アプリのエラーを処理する」をご覧ください。

クロスオリジン リソース共有 (CORS)

ブラウザーのセキュリティにより、Web ページでは、その Web ページを提供したドメインと異なるドメインに対して要求を行うことはできません。 この制限は、同一オリジン ポリシーと呼ばれます。 同一オリジン ポリシーにより、悪意のあるサイトが別のサイトから機密データを読み取ることが制限されます (ただし、阻止されません)。 オリジンが異なるエンドポイントへの要求をブラウザーから行うには、エンドポイントでクロス オリジン リソース共有 (CORS) を有効にする必要があります。

サーバー側の CORS の詳細については、「ASP.NET Core でクロスオリジン要求 (CORS) を有効にする」を参照してください この記事の例は、Razor コンポーネント シナリオに直接関連していませんが、この記事は、一般的な CORS の概念を学習するために役立ちます。

クライアント側の CORS 要求については、「ASP.NET Core のその他のセキュリティ シナリオBlazor 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);
    ...
}

Web API アクセスのテストのための Blazor フレームワーク コンポーネントの例

Web API バックエンド アプリを直接テストするために、Firefox Browser Developer などのさまざまなネットワーク ツールが一般公開されています。 Blazor フレームワークの参照ソースには、テストに役立つ HttpClient テスト資産が含まれています。

dotnet/aspnetcore GitHub リポジトリ内の HttpClientTest 資産

その他のリソース

全般

• W3C のクロスオリジン リソース共有 (CORS)
• ASP.NET Core でクロスオリジン要求 (CORS) を有効にする: コンテンツは、Razor コンポーネントではなく、ASP.NET Core アプリに適用されますが、この記事では一般的な CORS の概念について説明します。

オーバーポスティング攻撃の軽減

Web API は、一括割り当て攻撃とも呼ばれるオーバーポスティング攻撃に対して脆弱になる可能性があります。 オーバーポスト攻撃は、悪意のあるユーザーが、レンダリングされたフォームの一部ではなく、開発者がユーザーに修正を許可しないプロパティのデータを処理する HTML フォームの POST をサーバーに発行したときに発生します。 "オーバーポスティング" という用語は、文字どおり、悪意のあるユーザーがフォームで "過剰に" ポストすることを意味します。

オーバーポスティング攻撃の軽減に関するガイダンスについては、「チュートリアル: ASP.NET Core を使用して Web API を作成する」をご覧ください。

サーバー側

• サーバー側 ASP.NET Core Blazor の追加のセキュリティ シナリオ: HttpClient を使用してセキュリティで保護された Web API 要求を作成する方法について説明します。
• ASP.NET Core で IHttpClientFactory を使用して HTTP 要求を行う
• ASP.NET Core で HTTPS を適用する
• Kestrel HTTPS エンドポイントの構成

クライアント側

• ASP.NET Core Blazor WebAssembly のその他のセキュリティ シナリオ: HttpClient を使用してセキュリティで保護された Web API 要求を作成する方法について説明します。
• ASP.NET Core で Graph API を使用するBlazor WebAssembly
• フェッチ API