ASP.NET Core CORS エラーの原因と設定

フロントと API を分けた瞬間に出やすいのが CORS エラー。ブラウザのコンソールには出るが、サーバログには何も残らないことが多く、初見だと迷いやすい。

この記事では、原因の型とASP.NET Core での設定をざっくり逆引きする。

---

先に結論

• CORS はブラウザの制約。サーバ間通信だけでは原則出ない
• エラーの本体は「ブラウザが応答を JS に渡さない」こと
• ASP.NET Core ではポリシー設定とミドルウェア順が重要

---

よくある症状

• Access-Control-Allow-Origin がない
• preflight（OPTIONS）が 404 / 405
• 認証付きリクエストで * が使えず失敗
• ローカル（localhost:3000 → localhost:5000）だけ失敗

---

ASP.NET Core の基本設定

builder.Services.AddCors(options =>
{
    options.AddPolicy("Frontend", policy =>
        policy.WithOrigins("http://localhost:3000")
              .AllowAnyHeader()
              .AllowAnyMethod());
});

var app = builder.Build();
app.UseCors("Frontend");
app.MapControllers();

UseCors の位置はルーティングや認証との順番に注意。ポリシーを作っただけでは有効化されない。

---

認証付き（Cookie / Authorization）のとき

policy.WithOrigins("http://localhost:3000")
      .AllowAnyHeader()
      .AllowAnyMethod()
      .AllowCredentials();

AllowCredentials と AllowAnyOrigin()（*）は併用できない。Origin は明示する。

---

切り分け手順

1. ブラウザの Network で preflight（OPTIONS）の有無を確認
2. 本リクエストのレスポンスヘッダに Allow-Origin があるか確認
3. サーバ側 CORS ポリシーと UseCors の有効化を確認
4. リバプロや API ゲートウェイがヘッダを落としていないか確認

---

ざっくりまとめ

• CORS はブラウザ問題として切り分ける
• Origins を明示し、UseCors を有効化する
• 認証ありなら Credentials と Origin 指定をセットで見る