0

JQuery Mobile と PhoneGap を使用してモバイル アプリを構築しようとしています。このアプリは、ASP.NET MVC 3 で作業しているバックエンドにヒットします。現在、基本的な GET/POST を機能させようとしています。以下のテストページを作成しました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">

    <link rel="stylesheet" href="resources/css/themes/default/core.css" />    
    <link rel="stylesheet" href="resources/css/themes/default/app.css" />

    <script src="resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script> 
    <script src="resources/scripts/jquery.mobile-1.1.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      function initialize() {
      $.support.cors = true;
          $.mobile.allowCrossDomainPages = true;
      }
    </script>
  </head>

  <body onload="initialize();">
    <div id="testPage" data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>TEST</h1>
    </div>

    <div data-role="content">
      <input id="twitterButton" type="button" value="Test GET via Twitter" onclick="twitterButton_Click();" />
      <input id="getButton" type="button" value="Test GET via MVC 3" onclick="getButton_Click();" />
      <input id="postButton" type="button" value="Test POST via MVC 3" onclick="postButton_Click();" />

      <div id="status"></div>
    </div>

    <div data-role="footer" class="ui-bar" data-position="fixed"> 

    </div>

    <script type="text/javascript">
      function twitterButton_Click() {
        $("#status").html("Testing Twitter...");
          var vm = { q:"1" };
          $.ajax({
      url: "http://search.twitter.com/search.json?q=weekend&rpp=5&include_entities=true&result_type=mixed",
            type: "GET",
            dataType: "jsonp",
            contentType: "application/json",
            success: twitter_Succeeded,
            error: twitter_Failed
          });
        }

        function twitter_Succeeded(result) {
          $("#status").html("Twitter GET Succeeded!");
        }

        function twitter_Failed(p1, p2, p3) {
          $("#status").html("Twitter GET Failed :(");
        }

        function getButton_Click() {
          $("#status").html("Testing Get...");

          var vm = { q:"1" };
          $.ajax({
            url: "https://www.mydomain.com/myService/testGet",
            type: "GET",
            data: vm,
            contentType: "application/json",
            success: get_Succeeded,
            error: get_Failed
          });
        }

        function get_Succeeded(result) {
            $("#status").html("MVC 3 GET Succeeded!");
        }

        function get_Failed(p1, p2, p3) {
            $("#status").html("MVC 3 GET Failed :(");
        }

        function postButton_Click() {
          $("#status").html("Testing POST...");

          var vm = { data:"some test data" };
          $.ajax({
            url: "https://www.mydomain.com/myService/testPost",
            type: "POST",
            data: JSON.stringify(vm),
            contentType: "application/json",
            success: post_Succeeded,
            error: post_Failed
          });       
        }

        function post_Succeeded(result) {
            $("#status").html("MVC 3 POST Succeeded!");
        }

        function post_Failed(p1, p2, p3) {
            $("#status").html("MVC 3 POST Failed :(");
        }
    </script>
</div>
</body>
</html>

このページを Visual Studio 内から実行すると、AJAX URL 呼び出しが相対呼び出しに変更されます。それらは完全に機能します。ただし、私の目標は PhoneGap 内からこのアプリを実行することであるため、このページが実際にはローカル ファイル ( http://jquerymobile.com/demos/1.1.0/docs/pages/phonegap.html ) として実行されることがわかっています。このため、上記のコードを使用して、ローカル マシンに test.html を作成しました。

このコードを実行しようとすると、Twitter テストが機能します。奇妙なことに、3 つのアクションはすべて Internet Explorer で機能します。ただし、Chrome または FireFox を使用すると、サーバーに対するテストが機能しません。Chrome では、コンソールに次のように表示されます。

XMLHttpRequest cannot load https://www.mydomain.com/myService/testGet?q=1. Origin null is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load https://www.mydomain.com/myService/testPost. Origin null is not allowed by Access-Control-Allow-Origin.

これを確認しました:同一生成元ポリシーを回避する方法. ただし、どれも機能していないようです。欠けているサーバー側の構成があるように感じます。現在、私の TestGet および TestPost アクションは次のようになっています。

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult TestGet(string q)
{
  Response.AppendHeader("Access-Control-Allow-Origin", "*");
  return Json(new { original = q, response=DateTime.UtcNow.Millisecond }, JsonRequestBehavior.AllowGet);
}

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult TestPost(string data)
{
  Response.AppendHeader("Access-Control-Allow-Origin", "*");
  return Json(new { status=1, response = DateTime.UtcNow.Millisecond }, JsonRequestBehavior.AllowGet);
}

私はこの仕事を得るのにとても近いと感じています. 私は何が欠けていますか？どんな助けでも心から感謝します。

4

1 に答える 1

0

実際のデバイスまたはシミュレーターから試してみると、うまくいきます。よくある質問から:

クロスドメイン セキュリティ ポリシーは、PhoneGap アプリケーションには影響しません。html ファイルは file:// プロトコルを使用して webkit によって呼び出されるため、セキュリティ ポリシーは適用されません。(Android では、AndroidManifest.xml を編集して、アプリに android.permission.INTERNET を付与できます)

JSONP を使用してクエリに応答するため、常に Twitter と連携します。CORS を許可するように Chrome または Firefox を適切な方法で起動する必要があります。Chrome の場合は次のとおりです。

chrome --disable-web-security
于 2012-05-27T20:20:09.217 に答える