APIでCORSが有効になっていないのはなぜですか？

Question

私は単純なAPI（Web API 2）を持っており、ベアラ認証に精通しています。

私はトークンエンドポイントがポストマンと簡単なAjaxの呼び出しで動作していることを確認することができますかなり単純なノックアウトアプリケーションです

$.ajax({ 
    url: "http://localhost:51802/token", 
    type: "POST", 
    contentType: "application/x-www-form-urlencoded", 
    data: { 
      grant_type: "password", 
      userName: "foo", 
      password: "password123" 
    } 
}).done(function(data) { 
    console.log(data); 
}).fail(function(err) { 
    console.log(err); 
}); 

クライアントは、実行するために、NPMのhttpサーバを使用していますので、私はCORSを必要とします自分のAPIで有効にして、これらの呼び出しを行います。しかし、私がしようとするものはいずれも、（現在何もCORSヘッダを意味しない）任意の効果を持っていると思わない：

、上記のようにノードのhttpサーバは常に2の結果実行されているWebアプリケーション内から同じjavascriptのコールを使用して

//1 
public static void Register(HttpConfiguration config) 
{ 
    config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 
    /*remaining out of the box configuration*/ 
} 

//2 
public void ConfigureAuth(IAppBuilder app) 
{ 
    app.UseCors(CorsOptions.AllowAll); 
    /*remaining out of the box configuration*/ 
} 

エラー：

1. リソースの読み込みに失敗しました：サーバーは400（悪いRequest）の状態で応答（{"error":"unsupported_grant_type"}）
2. のXMLHttpRequestがhttp://localhost:51802/tokenをロードすることはできません。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。 Origin 'http://localhost:8080'はアクセスできません。応答は、HTTPステータスコードポストマンでヘッダを検査400

を持っていた、私は、任意のCORS関連のエントリを見つけることができません。

Cache-Control →no-cache 
Content-Length →641 
Content-Type →application/json;charset=UTF-8 
Date →Fri, 17 Mar 2017 06:58:54 GMT 
Expires →-1 
Pragma →no-cache 
Server →Microsoft-IIS/10.0 
Set-Cookie →.AspNet.Cookies=CiveOcfPNVqn_sVcJSQdi7VuqcleAd_Z9TD5Fff5m3lI3oZ3uVmThZHClXIAgwqByGoOlhfaCSHM8SwQ_GylajAnPdb0Ta6jmSl-M-CDnNYGdghibUWzSn_6-wgnNov_FGjkX8DSFoFvIYshFuppzbauS8MvUQkiDGVQg5pOvplaqcjD00SnsQMYssd5XQJGtb4NE35rOiF0Uk6hE45QxjAIUaq9LGVy; path=/; HttpOnly 
X-Powered-By →ASP.NET 
X-SourceFiles →=?UTF-8?B?QzpcUHJvamVrdGVcWWFpYlxZYWliLkFwaVxUb2tlbg==?= 

私はどちらかにいくつかの非常に基本的な構成を欠けているかなり確信しています私のAPIやクライアントが、私はそれが何であるか把握することはできません。

Answer 1

CORSを有効にするために、すべてのコントローラの起点、ヘッダー、メソッドを設定する必要があります。

次の2つの方法のいずれかでこれを行うことができます。

1.は、私たちのWeb.configファイル内のコントローラ（複数可）

​​

の構成2.これに属性を追加すると、

`<system.webServer> 
    <httpProtocol> 
     <customHeaders> 
     <add name="Access-Control-Allow-Origin" value="*" /> 
     <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
     <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" /> 
     <add name="Access-Control-Allow-Credentials" value="true" /> 
     </customHeaders> 
    </httpProtocol> 
</system.webServer>` 

Answer 2

問題は確かに "クライアント" でした。

正しい設定は、私が確認しました。この後app.UseCors(CorsOptions.AllowAll);

を使用していた、HTTPサーバ（http-server -c-1）は、任意のファイルをキャッシュし、Google Chromeからすべて一時的に保存されたファイルを削除しませんでした。 これがなければ、これらのエラーメッセージの原因の1つであった古いjavascriptコードが提供されます。

は、今私は、問題のコードを使用して認証することができましたし、その後保護されたリソースにアクセスします。

$.ajax({ 
    url: "http://localhost:51802/api/values", 
    type: "GET", 
    crossDomain: true, 
    headers: { 
     Authorization: "Bearer U90P0Lh-Q8ZeMyZXDzLSQPCfJVIXlmj94GHjLUY0M_B_Zfm-jojao7lUjZvcz_pLerS5BKwMrQk29eZI618mUZyhZ3gm0bjAy3WCZ4dYS1pv4vTaR8re6i8uriwsmtkm3FMwMxWOIPR0thLyYsjFQ7XM8s7K3pkUiIuEixFT8mG8wMnHe1FD1EoJxhadT7gbmYhm-MRO2cNuf2K8gx4EOyjwM2bsgdhtARA3oSDq5SezFRxLzDtZ32PfSpG61v9jOqIiJ0pWdtgeDSY2W7EusVzyDu0V7MB8kAc4uqNyjlCZFDiEn-mLvJkcqXpRf..." 
    } 
}).done(function(data) { 
    console.log(data); 
}).fail(function(err) { 
    console.log(err); 
});