web-dev-qa-db-ja.com

Angular 6 Asp.Net（コアではない）Web Api CORSリクエストが失敗する

私はAngular 6クライアントによって消費される.Net Web Apiを構築していますが、何らかの理由で開発環境で動作させることができません。

私は非常にシンプルなWeb Apiから始めましたが、これは文字列を返すだけです（フロントエンドとバックエンドのテスト目的間の通信を使用）：

// GET: api/Login
public IEnumerable<string> Get()
{
    return new string[] { "Now it works!" };
}

// POST: api/Login
public void Post([FromBody]string value)
{
    string strTest = "I'm doing just nothing";
}

そして、私のAngular 6アプリでは、次のリクエストを送信するメソッドがあります：

return this.http.post<any>(`http://localhost:9810/api/Login`, { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response
                if (user && user.token) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }

                return user;
            }));

私の最初の試みでは、私の応答はすべて応答で失敗しました：

zone.js：2969オプション http：// localhost：9810/api/Login 405（許可されていないメソッド）
login：1ロードに失敗しました http：// localhost：9810/api/Login ：プリフライトリクエストへの応答がアクセスコントロールチェックに合格しません：いいえ 'Access-Control-Allow-要求されたリソースにOriginヘッダーが存在します。したがって、オリジン ' http：// localhost：42 'はアクセスを許可されていません。

そこで調査した後、次の方法でWebApi .NetプロジェクトにCORSサポートを追加しました。

1）インストールされたNugetパッケージ：

Microsoft.AspNet.WebApi.Cors
Microsoft.AspNet.Cors

2）WebApiConfig Registerメソッドで：

var cors = new EnableCorsAttribute("http://localhost:4200", "*", "*");
// or var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

3）Apiコントローラークラスヘッダーの2）の代替：

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

しかし、どれも機能していないようで、リクエストは常にブラウザコンソールで上記で説明したのと同じエラーで失敗します。

http：// localhost：90 でhttp呼び出しをリッスンするセルフホスティングWebApiを作成しようとしました。また、ローカルWindows 10でWebApiを公開していた最後の試みIIS = 9810ポートのサーバー。

ブラウザのURLに「 http：// localhost/api/Login 」のようにアクセスすると、文字列は次のように返されます。

<ArrayOfstring xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.Microsoft.com/2003/10/Serialization/Arrays">
    <string>Now it works!</string>
</ArrayOfstring>

コンソールにエラーは表示されませんが、Angular（デフォルトのポート4200）でリクエストを行おうとすると、リクエストはCORSエラーで失敗します。

立ち往生しています。 Angularから動作させることができない場合、デバッグとテストを行うことができません。

ありがとう。

編集1：Chromeネットワークタブ情報が追加されました。

全般：

リクエストURL： http：// localhost：9000/api/Login
リクエスト方法：オプション
ステータスコード：405メソッドは許可されていません
リモートアドレス：[:: 1]：9000
参照者ポリシー：参照元のダウングレードなし

応答ヘッダー：

許可：GET、POST
コンテンツの長さ：76
Content-Type：application/json; charset = utf-8
日付：2018年8月29日水曜日10:32:36 GMT
サーバー：Microsoft-HTTPAPI/2.0

リクエストヘッダー：

受け入れる：/
Accept-Encoding：gzip、deflate、br
Accept-Language：es-ES、es; q = 0.9
Access-Control-Request-Headers：content-type
Access-Control-Request-Method：POST
接続：キープアライブ
ホスト：localhost：9000
起源： http：// localhost：42
ユーザーエージェント：Mozilla/5.0（Windows NT 10.0; Win64; x64）AppleWebKit/537.36（KHTML、Geckoなど）Chrome/68.0.3440.106 Safari/537.36

c#angularasp.net-web-apicors
8
Diego Perez

午前中ずっと頭を悩ませ、ここであなたが提案したことをすべて試した後、私の問題が簡単に解決できたとは信じられません。

@Madpopの提案については、Application_BeginRequest（何らかの理由で）は決して解雇されませんでした（理由を調査するのに多くの時間を費やす必要はありません）。

@Stevelandソリューションには依存性注入の追加が含まれており、Asp.Net CoreではなくAsp.Net framework 4.6を使用しているという事実とは別に、少し複雑になりました（あまり経験がありません）。

私は問題の簡単な解決策を探していた

[HttpPost]
[HttpOptions] //this was the key
[Authorize]

メソッドヘッダーを送信します。これは、リクエストで「オプション」動詞を許可する唯一の方法でした。

これがこれを達成するための最良の方法であるかどうかはわかりませんが、今のところはうまくいきます（あなたがどう思うか教えてください）。

私はここから皆さんから受け取ったすべての助けに感謝し、感謝します。私はこのテーマ（Angular + Web Api）の専門家ではないので、最後に次の質問をしたいと思います。

APIがサーバーにデプロイされる場合、またはローカルでデバッグとテストを行うためだけに必要な場合、この[HttpOptions]を実稼働環境にも配置する必要がありますか？

編集1：

テスト後、セルフホスティングWeb Apiで動作することに気付きましたが、Web Apiをローカルに公開するとIISブラウザで「415 Unsupported Media Type」が表示されます:(

6
Diego Perez

Corsの問題に関して、私は同様の問題にも直面しました。私は以下のコードを配置したglobal.asaxファイルを作成しました

protected void Application_BeginRequest()
{

    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        //These headers are handling the "pre-flight" OPTIONS call sent by the browser
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://staging.example.com:8044");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST");
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Accepts, Content-Type, Origin, X-My-Header");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "60");
        HttpContext.Current.Response.End();
    }

}

angular 6とionic 3で、これらすべてがインストールを試みる前に https://chrome.google。 com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi？hl = en

上記のchromeプラグインを起動してアクティブにし、アプリケーションを実行してみてください

2
Madpop