使用 AJAX 和 CORS 连接到 webService答案

【问题标题】：Connect to webService using AJAX and CORS使用 AJAX 和 CORS 连接到 webService
【发布时间】：2013-02-07 19:54:47
【问题描述】：

我正在开发一个带有 html5、css、js 和 jQuery Mobile 的 phonegap 应用程序，我需要连接到一个已经完成并且可以正常工作的 web 服务。问题是访问控制允许来源和跨域。好像这还不够难，我还必须考虑身份验证，这对于连接到 Web 服务至关重要。我已经完成了我的研究，阅读了很多 tuts，尝试了很多解决方案，其中一些使用 jsonP，这在我看来是最接近工作的。问题是我是新手，没有教程看起来不错，所以希望这里有人可以引导我。 webService 是在 asp.net 中构建的，如果需要，我可以完全访问它。我正在使用 AJAX 进行“调用”，但我无法通过 ForeFront 身份验证。

这是 JS+AJAX 代码：

function conteudoProg() {
    var webMethod = "myURL";
    var credentials = {
      username : "myUser",
      password : "myPass"
  };

$.ajax({
    type : "GET",
    url : webMethod,
    //data: credentials,
    contentType : "application/json; charset=utf-8",
    dataType : "jsonp",
    success : function(msg) {
        alert(msg);
    },
    error : function(e) {
        alert(e.status + " " + e.statusText );
    }
});
}

如果我将 dataType 从 jsonp 更改为 json，我会收到以下错误：

OPTIONS https://myURL 440 (Login Timeout) 
XMLHttpRequest cannot load https://myURL Origin http://127.0.0.1:8020 is not allowed by Access-Control-Allow-Origin.

使用jsonp，错误如下：

Resource interpreted as Script but transferred with MIME type text/html: "https://myURL/CookieAuth.dll?GetLogon?curl=Z2FWSInqueritosZ2FServ…1820135927463_1359737732559Z26_Z3D1359737732605&reason=0&formdir=3". jquery-1.8.2.min.js:2
Uncaught SyntaxError: Unexpected token <

【问题讨论】：

从您的 jsonp 错误的外观看来，服务器似乎没有像您期望的那样响应（使用 json 字符串），而是使用 text/html 页面。你能从你正在调用的服务中生成示例输出吗？
它没有用 json 响应，因为请求被重定向到 CookieAuth.dll（即 html）进行身份验证，这是缺少的部分......

标签： javascript cordova cors

【解决方案1】：

对另一个域的请求将引发一个预检OPTIONS 请求，以查看请求域是否可以调用此域。

接收端需要发出正确的标头，否则您的浏览器将阻止请求并显示您发布的错误。

假设你从mydomain.com请求到webservice.com

那么webservice.com/api 应该发出这些标头：

Access-Control-Allow-Origin: http[s]://mydomain.com
Access-Control-Allow-Credentials: true                      # if you want cookies
Access-Control-Allow-Headers: Content-Type, X-Custom-Header # any extra headers you want to send

确保网络服务知道OPTIONS 请求。它实际上只需要发出一些 CORS 标头，它不需要做任何其他事情（例如处理对其 API 的请求）。

您无需更改 AJAX 处理程序中的任何内容，它将作为任何其他请求传递。如果你想要 cookie，请确保设置 http_request.withCredentials = true;

请记住，HTTPS URL 被认为与 HTTP 域不同，并且确保您的 HTTPS 证书有效，如果它无效，请求可能会静默失败。如果您使用的是自签名证书（用于测试），请将其添加到您的浏览器或操作系统白名单中。 Cross domain request from HTTP to HTTPS aborts immediately

至于兼容性。早期版本的 Internet Explorer（8 及更低版本）使用 ActiveXObject，此 API 在 CORS 方面非常糟糕。它不支持身份验证/cookie 或自定义标头（例如Content-Type: application/JSON）。我会推荐一个 JSONp 后备。

【讨论】：

【解决方案2】：

代码不起作用，因为当您告诉 jQuery .ajax 方法需要一个 dataType json 时，这就是试图将响应解析成的内容。如果响应是 html，那么您应该使用 dataType html（或者没有，让默认的智能猜测起作用）。请参阅jQuery.ajax() dataType 了解更多信息。

【讨论】：