web-dev-qa-db-ja.com

React + ASP.NET.Core：要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

実際、これは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);
}

ご回答いただきありがとうございます。

c#reactjsasp.net-core.net-corecors
7
Siavash

困難な2日後、ようやく問題を解決できることがわかりました。実際、あなたのコメントの1つは私にとっていい手がかりでした。

@ kirk-larkinは言った：

ここでは、応答のHTTPステータスコード500が重要です。 ASP.NET Coreプロジェクトに例外がある場合、CORSヘッダーはクリアされます。例外がスローされている理由を調べてみてください。

コードを何度もトレースした後、Startup.csのコントローラーで使用したサービスを登録するのを忘れていることがわかりました。

Startup.csで以下のコードを呼び出して、問題を解決しました。

services.AddScoped<IMessageService, MessageService>();
4
Siavash

最近、同様の問題が発生しました。私の場合、ConfigureServicesメソッドとコードのこの部分にservices.AddCors();を追加すると動作し始めました

app.UseCors(builder => builder
   .AllowAnyOrigin()
   .AllowAnyMethod()
   .AllowAnyHeader()
   .AllowCredentials());

Configureメソッドで。どちらの場合も[〜＃〜] before [〜＃〜] UseMvc（）呼び出しを追加することを忘れないでください。

13
newbie

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()
  );
2
B12Toaster

アプリを作成しているときに同じ問題が発生しました。これをダウンロードしたchrome拡張機能で問題は解決しました。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

0
Fearcoder