React アプリから、トークン (JWT) ベースの認証が必要な ASP.NET Core Web API にクロスドメインでアクセスしてデータを取得するサンプルを作ってみました。

先の記事「Blazor WASM から ASP.NET Core Web API を呼び出し」の Blazor WASM アプリを React アプリに代えただけです。

Web API アプリの作り方は先の記事に詳しく書きましたのでそちらを見てください。

React アプリは、Visual Studio 2022 v17.10.3 のテンプレートを使って「新しいプロジェクトの作成」ダイアログで「React and ASP.NET Core」のテンプレートを選び、ターゲットフレームワーク .NET 8.0 で作成したものです。

その中の .client プロジェクトの src\App.jsx ファイルの populateWeatherData メソッドに以下のように手を加えて、先の記事の Web API を呼び出すようにしています。その結果が上の画像です。

import { useEffect, useState } from 'react';
import './App.css';

function App() {
    const [forecasts, setForecasts] = useState();

    useEffect(() => {
        populateWeatherData();
    }, []);

    const contents = forecasts === undefined
        ? <p><em>Loading... Please refresh once the ASP.NET backend has started.</em></p>
        : <table className="table table-striped" aria-labelledby="tabelLabel">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                </tr>
            </thead>
            <tbody>
                {forecasts.map(forecast =>
                    <tr key={forecast.date}>
                        <td>{forecast.date}</td>
                        <td>{forecast.temperatureC}</td>
                        <td>{forecast.temperatureF}</td>
                        <td>{forecast.summary}</td>
                    </tr>
                )}
            </tbody>
        </table>;

    return (
        <div>
            <h1 id="tabelLabel">Weather forecast</h1>
            <p>This component demonstrates fetching data from the server.</p>
            {contents}
        </div>
    );
    
    async function populateWeatherData() {
        // 自動生成されたコード
        //const response = await fetch('weatherforecast');
        //const data = await response.json();
        //setForecasts(data);

        // ・・・を、以下のように書き換える

        const tokenUrl = "https://localhost:44366/api/token";
        const forecastUrl = "https://localhost:44366/WeatherForecast";

        // 送信する ID とパスワード
        const credentials = {
            Username: "oz@mail.example.com",
            Password: "myPassword"
        };

        const params = {
            method: "POST",
            body: JSON.stringify(credentials),
            headers: { 'Content-Type': 'application/json' }
        };

        // ID とパスワードを POST 送信してトークンを取得
        const responseToken = await fetch(tokenUrl, params);
        if (responseToken.ok) {
            const data = await responseToken.json();
            let token = data.token;

            // 取得したトークンを Authorization ヘッダに含めて
            // 天気予報データを GET 要求し、応答を表示
            const responseForecast = await fetch(forecastUrl,
                { headers: { 'Authorization': `Bearer ${token}` } });
            if (responseForecast.ok) {
                const data = await responseForecast.json();
                setForecasts(data);
            }
        }
    }
}

export default App;

不可解なのが、上のコードでは Web API が 2 回呼ばれることです。ネットの記事を見ると、上のコード例のように useState の第 2 引数に空の配列 [] を設定した場合は初回レンダリングの際の 1 回だけしか第 1 引数に設定した populateWeatherData() は実行されないそうですが、Fiddler で要求・応答をキャプチャしてみると 2 回呼び出しが行われていました。

ネットの記事をいろいろ探したところ、React の useEffect のドキュメント（これが公式？）の「外部システムへの接続」のセクションに以下の記述を見つけました。

"バグを見つけ出すために、開発中には React はセットアップとクリーンアップを、セットアップの前に 1 回余分に実行します。これは、エフェクトのロジックが正しく実装されていることを確認するストレステストです。"

この記事以外に 2 回呼ばれる理由と結びつくことが書かれた記事は見つけられませんでした。本番環境で検証するとかすれば分かるのかもしれませんが、今はその気力がありません。（汗）　調べる気力が出てきて、何か分かったら追記します。

ちなみに、React には「クラスコンポーネント」と「関数コンポーネント」というものがあるそうで、上のサンプルコードは「関数コンポーネント」を使っています。それゆえ React フックと呼ばれる useEffect を使わざるを得ないようです。

一方、古い Visual Studio のテンプレートで作った React アプリは「クラスコンポーネント」を使っており、componentDidMount で Web API の呼び出しを行っています。その場合は 2 回 Web API が呼ばれることは無いです。

Visual Studio 2022 のテンプレートで作成する .NET 6.0 の React アプリは、Viusal Studio から実行すると React フロント側は Node.js 開発サーバーでホストされます。その Node.js 開発サーバーが HTTPS 通信で使用するサーバー証明書を更新する方法を書きます。

この記事は React フロント側が Node.js 開発サーバーで実行される場合の話で、フロント側も IIS Express や Kestrel 上で実行される .NET Core 3.1 や .NET 5.0 のアプリでは関係ないので注意してください。

前置きが少々長くなりますが、まずどのような仕組みになっているかを書きます。

Visual Studio 2022 が ASP.NET Core アプリを実行して HTTPS 通信を行う際に使うサーバー証明書は、dotnet コマンドを使って発行するフレンドリ名が ASP.NET Core HTTPS development certificate という自己署名証明書を使います。

（注: ASP.NET Core アプリでも IIS Express でホストする場合は IIS Express Development Certificate が使用されます。下の画像の青枠の下のものです）

その有効期限は発効後 1 年で、それを過ぎると上の画像のようにサーバー証明書の期限切れエラーとなります。

Windows OS にインストールされている開発用サーバー証明書を更新することは dotnet コマンドを使うなどして可能です。下の画像の青枠の証明書が新たに発行して OS にインストールされた証明書です。

ASP.NET Core アプリですとそれだけでサーバー証明書の期限れの問題は解決できるはずです。

しかしながら、.NET 6.0 の React アプリの場合はそれではエラーは解決しません。なぜかと言うと、Node.js 開発サーバーは独自に作成した証明書ファイルと秘密鍵ファイルを使っているからです。なので、それらが更新されない限りエラーは解決しません。

Visual Studio 2022 で作成する .NET 6.0 の React アプリで、HTTPS 通信のためにどのような設定が行われるかを以下に簡単に説明します。

まず、プロジェクトに含まれる Node.js のスクリプト aspnetcore-https.js が dotnet コマンドを使って自己署名証明書を発行し、証明書ファイルと秘密鍵ファイルを以下のフォルダに保存します。なお、ファイルが既に存在する場合はその操作はスキップされます。

%USERPROFILE%\AppData\Roaming\ASP.NET\https

ファイル名はデフォルトで証明書ファイルが <プロジェクト名>.pem、秘密鍵ファイルが <プロジェクト名>.key となります。

次に、aspnetcore-react.js がその証明書ファイルと秘密鍵ファイルを Node.js 開発サーバーがサーバー証明書として使うように設定します。

証明書ファイルと秘密鍵ファイルの場所の情報は、以下のように .env.development.local ファイルに含まれます。.env.development ファイルには PORT=44453 HTTPS=true という設定されていて、Node.js 開発サーバーが指定されたポートで HTTPS でリッスンするように指定されます。

それらの設定により、Visual Studio 2022 から React アプリのプロジェクトを実行すると、Node.js 開発サーバーは .env.development.local に指定のパスにある証明書ファイルと秘密鍵ファイルを使用して HTTPS 通信を行うようになります。

そのあたりの仕組みはネットで見つけた記事「"React での ASP.NET Core" テンプレートで生成されるプロジェクトの仕組みを調べてみた」が参考になりました。詳しく知りたい方はその記事を読むことをお勧めします。

以上のようなわけで、Node.js 開発サーバーが使用する開発用サーバー証明書を更新するには、.env.development.local 指定のパスにある証明書ファイルと秘密鍵ファイルを新しいものに書き換えるということになります。

それには、ちょっとプリミティブなやり方ですが、既存の証明書ファイルと秘密鍵ファイルを削除するか名前を変えてから Visual Studio 2022 からプロジェクトを実行してやります。それにより、上に述べた Node.js のスクリプト aspnetcore-https.js が新しい証明書ファイルと秘密鍵ファイルを作成してくれます。

下の画像は、既存の reactnet6.pem と reactnet6.key をそれぞれ reactnet6_old.pem と reactnet6_old.key にリネームした後で (赤枠のファイル)、Visual Studio 2022 でプロジェクトを実行し、新たに reactnet6.pem と reactnet6.key を生成させた (青枠のファイル) 結果です。

他にやり方は無いか探してみたのですが上記の方法以外見つかりませんでした。もっとスマートな方法がありそうな気がします。見つけたら追記します。

Visual Studio 2019 / 2022 の「React.js での ASP.NET Core」のテンプレートで作ったプロジェクトで、自動生成された Home.js とか Counter.js などに以下のように <p>日本語</p> という日本語を書き加えると Unexpected character '�' というエラーメッセージが出てコンパイルエラーになります。文字によってはコンパイルは通りますが文字化けします。

フレームワークを .NET Core 3.1 としてプロジェクトを作って同様なことをすると、ブラウザに空白画面が表示されるだけなので何が起こったのか分からないと思いますが、.NET 6.0 とするとコマンドラインに以下のように表示されます。（コンパイルエラーにならない場合は文字化けしてブラウザに表示されるので分かります）

ブラウザにも以下のようにエラーメッセージが表示されます。

文字によってはコンパイルは通り、ブラウザには結果が表示されますが、日本語の部分は文字化けします。 (コンパイルが通るもの / 通らないものの違いは不明です)

原因は Visual Studio で編集して保存する時ファイルの文字コードが Shift_JIS になってしまうからです。下の画像は Home.js をバイナリエディタで表示したものですが「日本語」の部分が 93 FA 96 78 8C EA と Shift_JIS になっているのが分かるでしょうか。

何故そんなことになってしまうかというと、Visual Studio の設定がそうなっているからです。下の画像を見てください。Home.js の「保存オプションの詳細設定」ですが、そこで［エンコード(E)］が「日本語 (シフト JIS) - コードページ 932」になっているのに注目してください。

このため日本語を書き込んで保存すると Shift_JIS になってしまい、UTF-8 を期待している React ではコンパイルエラーまたは文字化けするということです。Home.js 以外にも ClientApp/src フォルダのほとんどのファイルがその設定になっていますので注意してください。

解決策は、下の画像のように［エンコード(E)］を「Unicode (UTF-8 シグネチャなし) - コードページ 65001」として上書きすることです。

または、メモ帳で問題の .js ファイルを開いて［文字コード(E)］を BOM なし UTF-8 に設定して上書きすることでも OK です。一旦メモ帳で BOM なし UTF-8 で保存してしまえば、その後は Visual Studio で .js ファイルを開いて日本語を書き込んでも UTF-8 で保存されるのでこの問題は起こりません。（詳しい仕組みは分かりませんが、Visual Studio の「保存オプションの詳細設定」設定に反映されるようです）

なお、BOM 付き UTF-8 にすると下の画像のように Unexpected Unicode BOM (Byte Order Mark) という警告が出ますので注意してください。（「保存オプションの詳細設定」でシグネチャ付きというのは BOM 付きのことですので注意）

BOM 付きでもコンパイルエラーにはならず文字化けもしませんが、そこは警告に従って BOM なし UTF-8 にするのが良さそうです。

Visual Studio を操作して［追加(D)］⇒［新しい項目(W)...］で「JavaScript ファイル」を選んで作成すると BOM 付き UTF-8 になることに注意してください。コンパイルは通りますが、やはり Unexpected Unicode BOM (Byte Order Mark) という警告が出ます。

React プロジェクトでは ClientApp/src フォルダの .js ファイルだけでなく、Program.cs や Startup.cs でも保存オプションはデフォルトで「日本語 (シフト JIS) - コードページ 932」になっています。そこは ASP.NET Core プロジェクトでも同じです。

Program.cs や Startup.cs は Visual Studio が読んで処理を行いますので正しく文字コードが解釈され Shift_JIS でも問題は出ないはずです。ただ、ちょっと特殊な話ですが問題事例はありました。興味がありましたらTeratail のスレッド「asp.net.coreでの文字化けを解決したい。」を見てください。これはブラウザに送信する際は UTF-8 になっていたが、応答ヘッダやメタタグで文字コードの指定をしてなかったので、ブラウザが Shif_JIS として処理して文字化けを起こしたというもので、開発者のミスに近いものですが。

この記事の React の .js ファイルの話は、昔々 .NET Core 1 時代の MVC アプリで経験した「ASP.NET Core で文字化け」の .cshtml ファイルの件と似た話です。Microsoft も文字コードの問題はなかなか気が付かないのでしょうね。