🦈

【C#】WebAPIのCORSエラーの解決

2024/06/14に公開

はじめに

APIに繋げるときに困るのが、CORSエラーです。

コラム:CORSとは？

オリジン間リソース共有 (Cross-Origin Resource Sharing)のことです。
(引用:https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
一言で説明すると、異なるオリジン間を通信する仕組みです。
(引用:https://qiita.com/TaikiTkwkbysh/items/ec1f9163d286a94c929d)

なぜ今回CORSエラーが出たのかというと、ポート番号が違うからです。
スキーム、ホスト、ポートがすべて同じ（同一オリジン）じゃないと、CORSエラーが起こります。
今回の場合のスキーム、ホスト名、ポートは以下です。

	スキーム	ホスト名	ポート
API側	http://	localhost	:xxxx
React側	http://	localhost	:yyyy

↓以下を見るのが一番わかりやすいと思います。

React/TypeScriptでAPIにつなごうとしたとき、以下のようなエラーが出ることがあります。

Access to fetch at 'http://localhost:xxxx/api/hoge' from origin 'http://localhost:yyyy' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

今回は、その解決方法を紹介します。
参考サイトでは、Startup.csに書く古い方法が紹介されていたため、Program.csに書く方法で紹介します。

解決方法

Program.csを開き、追記します。
yyyyには、React側のポート番号を書いてください。
以下をvar app = builder.Build();の上に追記します。

builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
                    builder => builder
                        .AllowAnyMethod()
                        .AllowAnyHeader()
                        .WithOrigins("http://localhost:yyyy")
                );
});

以下をapp.Run();の上に追記します。

app.UseCors();

参考サイト

公式ドキュメントは以下です。

はじめに

解決方法

参考サイト

Discussion