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

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

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

2023-9-7 | ,

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

概要

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

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

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

仕様書

環境

  • React 8.2.0

手順書

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

Reactのプロジェクトのpackeage.jsonproxyキーを追加して、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製のAPIサーバー側でなんとかしようとしたんだけどもうまく行かなかった今日この頃。