ReactからC#(asp.net 6)にfetchしたい

Question

実現したいこと

asp.netのreactテンプレートを使用して、react側からfetchしてPOST形式でデータを受け渡したい

発生している問題・分からないこと

404エラーになってしまう。（console.logには　エラーが発生しました　のメッセージがでる）

エラーメッセージ

POST https://localhost:44458/search 404 (Not Found)

該当のソースコード

const sendSearchRequest = async () => {
        if (keyword.trim() === '') return; // 空の入力は無視
        try {
            //const response = await fetch('/api/search', {
            const response = await fetch('search', {
                method: 'POST',
                headers: {
                    'Accept': 'application/json', //追加
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ keyword: keyword })
            });

            if (response.ok) {
                const result = await response.json();
                console.log('結果:', result);
            } else {
                console.error('エラーが発生しました');
            }
        } catch (error) {
            console.error('通信エラー:', error);
        }
        console.log(keyword)
    };

 [Route("[controller]")]
    [ApiController] 
    public class SearchController : ControllerBase
    {  
        [HttpPost]
        public IActionResult Post([FromBody] SearchRequest request)
        {
            string keyword = request.Keyword;

            // キーワードを使って検索処理などを行う
            var result = $"検索キーワードは: {keyword} です";

            return Ok(new { message = result });
        }
    }
    public class SearchRequest
    {
        public string Keyword { get; set; }
    }

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ネットで同様の例が見つかりませんでした。
テンプレートのデフォルトでweatherforecastをgetでとってきているのでCORS（クロスオリジン）問題ではなさそう。

補足

reactテンプレート
react18.2
.net6

Comments

[hqf00342]

reactとASP.NET Coreはそれぞれ何番ポートで動作していますか？
エラーメッセージにある「44458」ポートはreact側のポートではないでしょうか？

[mmm1007]

コメントありがとうございます。
ASP.NET Core サーバーではhttps://localhost:7050
でhttps://localhost:44458 にリダイレクトされているようでした（おそらくこちら側がreactのサーバー）
ただ、デフォルトで用意されていたFetchData.jsとWeatherForecastController.csはGETをつかって天気情報をfetchできているようでしたが、やはりこのポートの違いが問題なのでしょうか？

[hqf00342]

なるほど、ということは ASP.NET APIではなくreactに対しfetchしています。
なのでfetch()の引数でターゲットホストを ASP.NET（https://localhost:7050） となるように指定する必要があります。
サンプルのweatherforecastがホスト指定していないのが不思議に思えるかもしれません。
それはVisualStudioのテンプレートで、react側のプロジェクト内に細工がしてあるからです。
vite.config.jsに「react側の/weatherforecast」にアクセスが来たらASP.NETにリダイレクトするような設定があると思います。作成された "search" に対しても同じことをしてもよいかもしれません。

[mmm1007]

コメントありがとうございます。以下を試したところ問題が解決しました。
setupProxy.jsに追記したところうまく動きました。
const context = [
"/weatherforecast",
"/作成したコントローラー名",
];

解決していただきありがとうございました。

[hqf00342]

NET8で確認したので若干違ったかもしれません・・。
解決したようでよかったです。

Answer 1

setupProxy.jsに追記したところうまく動きました。
const context = [
"/weatherforecast",
"/作成したコントローラー名",
];