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 测试有效。奇怪的是，这三个操作都可以在 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 文件由 webkit 使用 file:// 协议调用，因此安全策略不适用。（在 Android 中，您可以通过编辑 AndroidManifest.xml 将 android.permission.INTERNET 授予您的应用程序）

它将始终与 Twitter 一起使用，因为它使用 JSONP 来响应查询。您必须以正确的方式启动 Chrome 或 Firefox 来告诉它允许 CORS。对于 Chrome，它是：

chrome --disable-web-security
于 2012-05-27T20:20:09.217 回答