web-dev-qa-db-ja.com

CORSエラー-要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません

Angularフロントエンドを使用してWEBAPI 2バックエンドに接続しています。失敗するユースケースは次のとおりです。ユーザーが登録するとき、登録が成功すると、システムにログインし、詳細情報を収集するために新しいページにリダイレクトされます。認証にTOKENSを使用しています。

WebAPI設定でCORSを有効にしました：

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

登録リクエストは成功し、レスポンスヘッダーには必要なCORSヘッダーがあります。

**Access-Control-Allow-Credentials:true
Access-Control-Allow-Origin:http://localhost:7812**
Content-Length:0
Date:Sun, 24 Aug 2014 09:31:55 GMT
Server:Microsoft-IIS/8.0
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcVGVzdGluZ1xNYWx0QXBhcnRtZW50c1xNYWx0YXBhcnRtZW50cy5BUElcTWFsdGFwYXJ0bWVudHMuQVBJXGFwaVxhY2NvdW50XHJlZ2lzdGVy?=

次のステップでは、ユーザーをシステムにログインさせようとします。ログインの一部として、フロントエンドはRequest URL:http://localhost:7802/tokenのサーバーにトークンを要求します。リクエストヘッダーは再びOriginヘッダーOrigin:http://localhost:7812を送信しますが、今回はエラーが発生します：XMLHttpRequest cannot load http://localhost:7802/token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7812' is therefore not allowed access.

誰かアイデアはありますか？

asp.netangularjsasp.net-web-apicorsasp.net-web-api2
8
Greg

CORSを処理するときは、非GETリクエストに対してブラウザから2つのリクエストが送信される可能性があることに注意する必要があります。通常、プリフライト（OPTIONS）リクエストがあり、次に実際のリクエスト（POST）があります。プリフライトリクエスト中に、サーバーはリクエストに一致する値を持つAccess-Control-Allow-Originヘッダーを追加する必要がありますOriginヘッダ。これにより、後続のリクエストの送信が承認されます。

後続の/実際のリクエストでは、サーバーはAccess-Control-Allow-Originヘッダーも追加する必要があります。それ以外の場合、この要求は失敗します。

OWIN OAuthAuthorizationServerProviderを使用する場合、ヘッダーロジックを管理するためにMatchEndpointハンドラーをカスタマイズする必要があります。このハンドラーは、クライアント認証を検証する前に実行されます。

背景情報の詳細については、次のリンクを参照してください： http://www.ozkary.com/2016/04/web-api-owin-cors-handling-no-access.html

3
ozkary

プリフライトリクエスト が原因です。

解決策については、次の記事をお読みください。

1
wilver

web.configでこれらの行を使用します：

<system.webServer>
  <modules>
    <remove name="WebDAVModule" />
    ...
  </modules>
  <handlers>
    <remove name="WebDAV" />
    ...
  </handlers>
</system.webServer>

それは私の問題を修正します、それはあなたを助けるかもしれません。

0
fsm3xpert

私はあなたが2つの問題を抱えていると信じています：

1- Web API 2では、ベアラートークンを付与するときに、ヘッダーを手動で追加する必要があります。

2-データはURLエンコードする必要があるため、$ httpポストメッセージをインターセプトしてデータをエンコードする必要があります。

angularJSクライアント側からWebAPI2を使用している私の記事を参照してください。

http://www.codeproject.com/Articles/742532/Using-Web-API-Individual-User-Account-plus-CORS-En

お役に立てば幸いです。

0
Omar.Alani