今回、ローカル開発環境にてasp.net web api とBlazor wasmを連携させているときに行ったCORS対応をメモ。
状況
サーバ側とSPA側両方ともlocalhostですが、ポート番号が違います。クロスオリジン許可として、今回はポート違いに対応する必要があるのです。ちなみにポート違いはサブドメイン違いとも違った対処が必要なので注意。
それを踏まえた上で、以下の設定を追加した状態でもCORSがうまくいかず、エラーが発生している状況でした。
builder.Services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins, builder =>
{
builder.WithOrigins(@Enums.ClientServiceURL).AllowAnyMethod().AllowAnyHeader();
});
});
var app = builder.Build();
ProgramObject.Configuration = app.Configuration;
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI();
}
app.UseCors(MyAllowSpecificOrigins);
app.UseHttpsRedirection();
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();
app.Run();
設定変更
Chromeのネットワークタブにてリクエスト結果を見てみると、なぜかリダイレクトが行われている様子。調べてみると、以下の行があると「http環境の場合リダイレクトされる」とのことでした。しかし自分の環境ではhttps://localhost~で実行されるため関係ないのかなと思っていましたが。。
app.UseHttpsRedirection();
この行をコメントアウトするとCORS設定がうまく効くように。
まとめ
時間がないので細かくは追っていませんが、ローカルでのAPI通信がうまくいかない方は上記をコメントアウトしてみてください。