12

モバイルアプリ開発の学習プロセスを進めると、新しい障害が見つかりました。クロスオリジンリクエストシェアリングまたはCORSです。

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

私のAngularJSコントローラーは、$http.post()サービスメソッドを使用してWebAPIコントローラーを呼び出します。ただし、Chromeデバッガーは、呼び出しがOPTIONSリクエスト（おそらくCORSプリフライトリクエスト）で失敗したと言います。

次の投稿からCORSアクションセレクターを実装しました：WebAPIプロジェクトでのCORSの有効化。Fiddlerからapiメソッドを呼び出すのは難しいですが、AngularJSはOPTIONSプリフライトリクエストで失敗し続けます。

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

ありがとう。

4

4 に答える 4

11

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>
于 2014-02-13T09:39:35.953 に答える
3

Microsoft Web API 2 を使用した AngularJS 1.3 でこの問題に遭遇したときに、CORS 構成の問題に対する簡単な解決策を見つけました。

  • 最初に Nuget inall から - Microsoft 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);

Web サイトの代わりに * を使用して CORS をどこでも有効にすることもできますが、これは CORS の目的を無効にし、セキュリティ ホールを開くことになりますが、テストのために行うことはできます。

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

于 2015-04-16T18:38:54.677 に答える
0

Thinktecture Corsオブジェクトを確認してください。これらのオブジェクト（ナゲット可能）を使用すると、独自のコードなしでWebApiで完全なCORSサポートを取得できます。

正しいCORS実装を使用しても、IIS 7で非常に奇妙な問題が発生しました。これは、WebDavのすべての動詞を有効にすることで解決されました（はい、WebDav-ブログ投稿の指示に従った理由を聞かないでください:-D）。

これを行う：

  • IISマネージャーを開き、アプリケーションのハンドラーマッピングに移動します。
  • WebDavハンドラーをダブルクリックします
  • 「制限のリクエスト」をクリックします
  • [動詞]タブで、[すべての動詞]を選択します。

繰り返しになりますが、WebApiがWebDavを使用する理由はわかりませんが、これにより、正しいCORS実装にもかかわらず機能しないPOSTおよびDELETEの問題が解決されました。

于 2013-02-18T09:46:12.230 に答える