【React】localhostの別のポートで稼働してるAPIサーバーにアクセスする

Reactでlocalhostの別のポートで稼働してるAPIサーバーにアクセスしたい！

概要

今回の記事では、Reactでlocalhostの別のポートで稼働してるAPIサーバーにアクセスする手順を掲載する。

別のサーバーや同一サーバーでもポート番号の違うAPIサーバーにアクセスしようとするとクロスオリジンリソース共有 (CORS) の制約に引っかかってアクセスに失敗する。

セキュリティ的にはめちゃくちゃ正しいんだけども開発環境では手軽にデバッグし隊！

仕様書

環境

React 8.2.0

手順書

プロキシ経由ででAPIサーバーに接続する例。

Reactのプロジェクトのpackeage.jsonにproxyキーを追加して、APIサーバーのアドレスを入力する。

{
    ...
    "proxy": "http://localhost:58099"
}

fetchでは相対アドレスで渡す。

    fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: username, password: password })
    })

サーバーがASP.NET Core Web(.NET 7.0)の場合

サーバーがASP.NET Core Webの場合でProxyを使わずにCORSで対応する場合の設定。

Startup.csのConfigureServices関数とConfigure関数の中にCORSの設定を足す。

        public void ConfigureServices(IServiceCollection services)
        {
            ...

#if DEBUG
            services.AddCors(options =>
            {
                options.AddPolicy("AllowSpecificOrigin",
                    builder =>
                    {
                        builder.WithOrigins("http://localhost:3000")
                               .AllowAnyMethod()
                               .AllowAnyHeader();
                    });
            });
#endif

            ...
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            ...

#if DEBUG
            app.UseCors("AllowSpecificOrigin");
#endif

            ...
        }

プリプロセッサーでDEBUG時のみ設定されるようにする。

まとめ（感想文）

サーバー側は、使ってるものによって設定のやり方が変わるので注意。