AngularJS + ASP.NET Web APIクロスドメインの問題

Question

私のモバイルアプリケーション開発の学習プロセスでは、新しい障害、クロスオリジンリクエスト共有またはCORSが見つかりました。

私は、AngularJS + jQuery Mobile（Cordova電話クライアント）とASP.NET Web API（バックエンド）の組み合わせを使用しています。私の問題は、APIリクエストに対してPOSTリクエスト（または他のタイプのリクエスト）を完了できなかったことです。

私のAngularJSコントローラは、$http.post()サービスメソッドを使用してWeb APIコントローラを呼び出します。ただし、Chromeデバッガでは、OPTIONSリクエスト（CORSプリフライトリクエストなど）で呼び出しが失敗したと表示されます。

次の投稿からCORSアクションセレクタを実装しました：Enabling CORS in Web API Project。難しいですが、私はFiddlerからapiメソッドを呼び出すことができます、AngularJSはOPTIONSプリフライトリクエストに失敗し続けます。

AngularJSとドメイン間の呼び出しについて知っておくべきことはありますか？私の苦境への可能な解決策？

ありがとうございました。

Answer 1

Thinktecture Corsオブジェクトをチェックしてください。これらのオブジェクト（ナゲットテーブル）を使用すると、独自のコードを使用せずにWebApiで完全なCORSサポートを受けることができます。

CORSを正しく実装しても、WebDavのすべての動詞を有効にすることで解決されたIIS 7で本当に奇妙な問題が発生しました（はい、WebDav - -D）。

• IISマネージャを開き、アプリケーションのハンドラーマッピングに行く：

  はこれを行います。

• ダブル、「動詞」タブをクリックし、「要求の制限」
• に
• WebDavのハンドラをクリックし、「すべての動詞」を選択します。

また、WebApiがWebDavを使用する理由は考えられませんが、CORSの正しい実装にもかかわらず動作しないPOSTおよびDELETEの問題を解決しました。

Answer 2

content-type：application/x-www-form-urlencodedを使用して、プリフライトオプションの要求をスキップできます。

AngularJS：

var user = { 
    ID: 1, 
    Name: 'test' 
}; 

$http({ 
    url: "api.localhost/api/users/addUser", 
    method: "POST", 
    data: $.param(user), 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 
    withCredentials: true, 
    }).success(function (data, status, headers, config) { 
    console.log(data); 
}) 

ウェブAPI：

[HttpPost] 
public string AddUser(User user) 
{ 
    // Do something 
    return user.Name + " added"; 
} 

のWeb.config

<system.webServer> 
     <validation validateIntegratedModeConfiguration="false" /> 
      <handlers> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" /> 
       <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" /> 
       <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
       <remove name="OPTIONSVerbHandler" /> 
       <remove name="TRACEVerbHandler" /> 

       <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" /> 
       <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
      </handlers> 
      <httpProtocol> 
       <customHeaders> 
        <add name="Access-Control-Allow-Origin" value="http://localhost" /> 
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" /> 
        <add name="Access-Control-Allow-Credentials" value="true" /> 
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 
       </customHeaders> 
      </httpProtocol> 
     </system.webServer> 

Answer 3

このISSにつまずきながらAngueJS 1.3とMicrosoft Web API 2でue私はCORS構成の問題に対する簡単な解決策を見つけました。

• Nugetのintallからファースト - マイクロソフトWEBAPI CORS

  Install-Package Microsoft.AspNet.WebApi.Cors 
  

• その後、あなたのWebApiConfig.csファイルで：

  var cors = new System.Web.Http.Cors.EnableCorsAttribute("www.my-angular-web-site.com", "*", "*"); 
  
  config.EnableCors(cors); 
  

また、でどこでもCORSを有効にすることができます*あなたのウェブサイトではなく、CORSの目的を破ってセキュリティホールを広げますが、テストのためにそれを行うことができます。

また、WebApi.Corsアセンブリを使用すると、コントローラーまたは他のより詳細な詳細でコントロールコントローラーを有効にすることができます。その他の詳細については、Web APIサイトのhereを参照してください。