web-dev-qa-db-ja.com

MVC Web API Angular App（ 'http：// localhost：4200' is blocked by CORS policy）

フロントエンドWebアプリ（Angular）がAsp.NET MVC（コントローラー）にアクセスできるようにする方法を探すことに何時間も費やしてきましたが、次のエラーが表示されます。

Origin ' http：// localhost：42 'から ' https：// localhost：44344/Authentication/SignIn 'でのXMLHttpRequestへのアクセスがCORSポリシーによってブロックされました：応答プリフライト要求はアクセス制御チェックに合格しません：HTTP okステータスがありません。

角度付きURL：http://localhost:4200/login?returnUrl=%2F

MVC URL：https://localhost:44344/

ここでも私が私のweb.configに追加したもの

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:4200" />
    <add name="Access-Control-Allow-Headers" value="*" />
    <add name="Access-Control-Allow-Methods" value="*" />
    <add name="Content-Type" value="application/json"/>

    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

また、メインコントローラに次の行を追加しました。

 [EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

しかし、エラーは同じです。

これがコントロールの初期です：

    [HttpPost]
    [AllowAnonymous]
    [DisableCors]
    public JsonResult SignUp(HF_Accnt_Access Company)

誰かが私を助けてくれますか？.

asp.net-mvcangularhttpasp.net-web-apicors
5
Steven Morris

Rick Strahlが web blog でよく説明しているように、問題は次のとおりです。Angularのデフォルトの作業環境は開発サーバーを実行します実質的に別のドメインである別のポートと、API呼び出しのためのメインASP.NETサイトへのすべての呼び出しは、事実上、クロスドメイン呼び出しです。悲しいかなこれらの呼び出しは失敗し、詳しく調べたところ、CORSヘッダーが送信されていなかったことが原因でした。したがって、解決策は次のとおりです。

// Add service and create Policy with options
public void ConfigureServices(IServiceCollection services)
{   
    services.AddCors(options =>
    {
        options.AddPolicy("CorsPolicy",
            builder => builder.AllowAnyOrigin()
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials() );
    });        
    services.AddMvc(); 
}

次に、それをグローバルにすべてのコントローラーに割り当てるか、以下のように個々のコントローラーに割り当てることができます。

  1. グローバルに割り当てる

    public void Configure(IApplicationBuilder app){  

    // global policy - assign here or on each controller

    app.UseCors("CorsPolicy");

    // IMPORTANT: Make sure UseCors() is called BEFORE this
    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

  2. 個別に割り当てる

    [EnableCors("CorsPolicy")]
public class TestController : Controller

このエラーが発生する可能性があります：

CORSプロトコルでは、ワイルドカード（任意）のオリジンと資格情報を同時に指定することはできません。資格情報をサポートする必要がある場合は、個々のオリジンを一覧表示してポリシーを構成します

サービスからallowCredentials（）を削除するだけです。

それが役に立てば幸い。

0
Ali Tabandeh

Access-Control-Allow-Methodsのワイルドカードは、まだすべてのブラウザーでサポートされているわけではありません。

ブラウザのサポートもMDNによって追跡されます here

この行を変更/

[EnableCors(origins: "http://localhost:4200", headers: "*", methods: "*")]

[〜＃〜]〜[〜＃〜] 

 [EnableCors(origins: "*", headers: "*", methods: "GET, POST, PUT, DELETE, OPTIONS")]

また、ブラウザがプリフライトリクエストをサーバーに送信するため、 "OPTIONS"メソッドをglobal.asax で個別に処理する必要があります。

 protected void Application_BeginRequest()
    {
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, PATCH, DELETE, OPTIONS");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }
0
satsvelke