【本番環境/production】「No 'Access-Control-Allow-Origin' header」が出た時の解決策

環境

・Windows
・Visual Studio
・C#
・.NET 6.0
・visual studio code
・React 18.2.0
・Typescript 4.9.5
・Node 20.11.0

IDEを分けての開発

今回はVisual StudioでC#のバックエンド、vscodeでReact×Typescriptを開発しました。
フロントエンドとバックエンドの開発をIDEを変えてしました。
本番環境では、バックエンド側のプロジェクトをAzure web appserviceへ、フロントエンド側のプロジェクトをAzure static appsにデプロイしました。

*IDEとは、Integrated Development Environment（統合開発環境）の略で、ソフトウェア開発に必要な様々なツールを一つにまとめたものです。
例えば、コードを書くエディタやコンパイラ、デバッガ、テストツール、バージョン管理ソフトなどがIDEに含まれます。

解決策

結論、Azure web app service（バックエンド側のプロジェクト）のCORS設定をAzure portal上からしていなかったのが原因でした。
これに気づくまで2時間くらい悩んでいました、、

ここのCORSを開くと、フロントエンド側のURLを入力する場所があるので、入力してOKを押せばエラーは解決されました。

感想

今回IDEを変えてAPI側とフロント側で分けて開発したので、CORSへの理解が深まりました。
みなさんもIDEを分けて開発する場合は、CORSにお気を付けください！

追加情報

Microsoftの公式ページには、以下の文章が書かれています。

一般に、UseCors の前に UseStaticFiles が呼び出されます。 JavaScript を使用してクロスサイトで静的ファイルを取得するアプリでは、UseStaticFiles の前に UseCors を呼び出す必要があります。

app.UseRouting();

app.UseStaticFiles();　#　UseCorsの上にある
app.UseCors("_myAllowSpecificOrigins");



app.UseAuthentication();
app.UseAuthorization();

ReactアプリなどJavascriptを基にした言語のプロジェクトでは以下のようにUseStaticFilesの位置を変更する必要があるようです。

app.UseRouting();


app.UseCors("_myAllowSpecificOrigins");

app.UseStaticFiles(); #位置がUseCorsの上から下に変わっている

app.UseAuthentication();
app.UseAuthorization();