Corsが有効になっていても、Web Api 2で有効なトークンを取得できません

Question

NuGetパッケージをVS2015ソリューションにインストールし、Web APIプロジェクトでCORSを有効にしました。

Fidderを使用して/token POSTリクエストとAPIコントローラ\api\valuesにGETリクエストをテストしました。

フィンドラーで受け取ったトークンを使用してJavaScriptのGETリクエストにハードコードすると、実際にはシングルページアプリケーションからの\api\valuesへのリクエストが成功します。

問題：ローカル開発環境のhttp://localhost:17883/tokenへのPOSTリクエストを正常に送信できません。

Chromeのエラーは次のとおりです。

XMLHttpRequest cannot load http://localhost:17883//token. 
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. 
XHR failed loading: POST "http://localhost:17883//token". 

私はWebApiConfig.csでCORSを有効にしている - 私の角度authServiceで

using System; 
 
using System.Collections.Generic; 
 
using System.Linq; 
 
using System.Net.Http; 
 
using System.Web.Http; 
 
using Microsoft.Owin.Security.OAuth; 
 
using Newtonsoft.Json.Serialization; 
 

 
namespace API 
 
{ 
 
    public static class WebApiConfig 
 
    { 
 
     public static void Register(HttpConfiguration config) 
 
     { 
 
      // Web API configuration and services 
 
      // Configure Web API to use only bearer token authentication. 
 
      config.SuppressDefaultHostAuthentication(); 
 
      config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType)); 
 

 
      // Web API routes 
 
      config.MapHttpAttributeRoutes(); 
 

 
      // *** ENABLE CORS *** 
 
      var cors = new System.Web.Http.Cors.EnableCorsAttribute("*", "*", "*"); 
 
      config.EnableCors(cors); 
 
      
 
      config.Routes.MapHttpRoute(
 
       name: "DefaultApi", 
 
       routeTemplate: "api/{controller}/{id}", 
 
       defaults: new { id = RouteParameter.Optional } 
 
      ); 
 
     } 
 
    } 
 
}

を、私は、APIをコード化私のLoginページ（この要求は成功しています）のボタンに接続されたテスト機能：

var _apitest = function() 
 
    { 
 
     var deferred = $q.defer(); 
 

 
     var tkn='cbJZpiF-rEdi_WgWzuFOAxPZ0lBiqivEnOmpSYMPu_fuvu37cpLFzHhzc119GfwIc6dnDivYhhH2a1O2bMa6EExRGa3lvPfzZJHiDDaH6klIU2NFEG5FMxFl_-Z_jBQvPkPyW_31iP6P_oVNZZpXzkQfkwA4zilzKLE7If2Dko6MNNID1lscVfkZ4emJXWpalSXCS4A7qmO-ceIchMfrcbZHgVqBjZC_YHz-DxAfg2lTksUdn8NBir_cDOH5Ymsrzj_bKP1H6WJULDfZEPuh0PpB2DlJEXOV63KWUf7Eubp_FYfni5czD1Z-lh2a2RPRfpRxlMQVBUCCp03_Ul5a6lzOFHSJCJlynidw2DV_InK-oFZEuvQK2Xiy_7wq0JVmx-Nej1bQRN7b2eWK25jjdrTfCNyMdtmDZ7qOSmX3dWuyQhCbp_15ciFhmr7wfIYPzsFssbg-XHtDi2lw87KkJ0IhNmtnsoNyKCrM5ibJG5O5t_gxr3l52JN54Jj2mbeY'; 
 

 
     var req={ 
 
      "method": "GET",    
 
      "url": "http://localhost:17883/api/values", 
 
      "headers": {     
 
       "Authorization": "Bearer " + tkn 
 
      } 
 
     };   
 
     $http(req).then(function (data) 
 
     { 
 
      deferred.resolve(data); 
 
     }); 
 

 
     return deferred.promise; 
 
    };

\tokenこのPOSTリクエストが正常に実行されません：

var _loginUserPost = function (loginData) 
 
    {   
 
     var controllerpath = "/token";  
 
     var url = serviceBase + controllerpath; 
 
     var body = "username=" + loginData.userName + "&password=" + loginData.password + "&grant_type=password"; 
 
     
 
     var deferred = $q.defer(); 
 
     deferred.notify("Logging in user..."); 
 

 
     // POST REQUEST !! 
 
     var req = { 
 
      method: 'POST', 
 
      encoding: 'JSON', 
 
      headers: { 
 
       'Content-Type': 'application;x-www-form-urlencoded'     
 
      }, 
 
      url: url, 
 
      data: body 
 
     }; 
 

 
     $http(req).then(function (data) 
 
     { 
 
      deferred.resolve(data); 
 
     }, function (err) 
 
     { 
 
      deferred.reject("Failed to login user via api call."); 
 
      console.log("Failed to login user via api call. Errors details: " + err); 
 
     }); 
 

 
     return deferred.promise; 
 
    }

私もEnableCors属性でApplicationOAuthProvideクラスを飾るしようとしたが、それまだ動作しません：

[EnableCors(origins: "*", headers: "*", methods: "*")] 
public class ApplicationOAuthProvider : OAuthAuthorizationServerProvider 
{ 
    ... 
} 

本当に私が迷っているものを知る必要があります。私は探していて、別のものを試していますが、役に立たないものです。

アドバイスをいただきありがとうございます。

ボブ

********* UPDATE - 私がこれまで試したどのような************

それでも、\tokenへの要求が蹴られますChromeでCORS例外が返されます。私はHeadersを追加しようとして失敗したしました

（検索 "ステップ10：" この記事で：http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/）：

public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context) 
    { 

     context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" }); // BM: 

    ... 
    } 

Answer 1

はあなたのコントローラ内のオプション（）アクションを持っていることを確認してください。おそらく、投稿の前にプリフライトのオプションリクエストを作成していて、一致するアクションが見つからない可能性があります。

public HttpResponseMessage Options() 
{ 
    return new HttpResponseMessage { StatusCode = HttpStatusCode.OK }; 
} 

に構成されているIIS方法に応じて、あなたはまた、オプションが

<system.webServer> 
    <security> 
     <requestFiltering> 
     <verbs applyToWebDAV="false"> 
      <add verb="OPTIONS" allowed="true" />          
     </verbs> 
     </requestFiltering> 
    </security> 
<system.webServer> 

はまた、あなたが角に指定していることを確認のContent-Typeを作るあなたのweb.configファイルに要求できるようにする必要があるかもしれません

var req = { 
    // ... 
    headers: 
     'Content-Type': 'application;x-www-form-urlencoded'     
    }, 
    // .. 
};