実際、これはduplication投稿ではなく、 stackoverflow コミュニティで何度も尋ねられたタイトルの一部を知っています。投稿と回答がありますが、私が使用した私の問題と技術は異なると思います。
まず、ASP.NET Core WEB/API
は私のバックエンドアプリであり、Reactjs
は私のフロントアプリケーションです。
CORS
について読んだところ、ASP.NET
アプリでCORS
を有効にし、リクエストのヘッダーに'Access-Control-Allow-Origin':'*'
を配置する必要があることがわかりましたが、 APIを呼び出す:
要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、Origin ' http:// localhost:808 'はアクセスを許可されていません。応答のHTTPステータスコードは500でした。不透明な応答でニーズが満たされる場合は、要求のモードを「no-cors」に設定して、CORSを無効にしてリソースを取得します。
これは、CORS
に関連するStartup.cs
コードです。
public void ConfigureServices(IServiceCollection services)
{
// other lines of code
services.AddCors(options =>
{
options.AddPolicy("AllowAll",
builder =>
{
builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader();
});
});
services.Configure<MvcOptions>(options =>
{
options.Filters.Add(new CorsAuthorizationFilterFactory("AllowAll"));
});
// other lines of code
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
app.UseCors("AllowAll");
app.UseAuthentication();
app.UseMvc();
}
これは私の反応コードです:
function save(message) {
const requestOptions = {
method: 'POST',
mode: 'cors',
headers: { ...authHeader(),
'Content-Type': 'application/json',
'Access-Control-Allow-Origin':'*',
},
body: JSON.stringify(message)
};
return fetch(config.apiUrl + '/message/save', requestOptions).then(handleResponse, handleError);
}
ご回答いただきありがとうございます。
困難な2日後、ようやく問題を解決できることがわかりました。実際、あなたのコメントの1つは私にとっていい手がかりでした。
@ kirk-larkinは言った:
ここでは、応答のHTTPステータスコード500が重要です。 ASP.NET Coreプロジェクトに例外がある場合、CORSヘッダーはクリアされます。例外がスローされている理由を調べてみてください。
コードを何度もトレースした後、Startup.csのコントローラーで使用したサービスを登録するのを忘れていることがわかりました。
Startup.csで以下のコードを呼び出して、問題を解決しました。
services.AddScoped<IMessageService, MessageService>();
最近、同様の問題が発生しました。私の場合、ConfigureServices
メソッドとコードのこの部分にservices.AddCors();
を追加すると動作し始めました
app.UseCors(builder => builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials());
Configure
メソッドで。どちらの場合も[〜#〜] before [〜#〜] UseMvc()呼び出しを追加することを忘れないでください。
ASP.NET Core 2.1では、コントローラーが例外をスローするとエラー500が発生し、CORSヘッダーは送信されません。これは次のバージョンで修正されるはずですが、それまではミドルウェアを使用して修正できます。
見る
また、資格情報では、ホストとポートにWithOrigins
を明示的に追加する必要があることに注意してください。ほとんどのブラウザはそれを無視します( https://stackoverflow.com/a/19744754/2477619 を参照) :
app.UseCors(builder =>
builder
.WithOrigins("http://localhost:4200")
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials()
);
アプリを作成しているときに同じ問題が発生しました。これをダウンロードしたchrome拡張機能で問題は解決しました。
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi