javascript - 使用文件 ://在本地加载的来自移动 WebView 的 CORS cookie 凭据

Question

请耐心等待，这需要一些解释。

我正在帮助构建一个混合移动网络应用程序。主要代码库是 HTML5 和 JavaScript，它们将被包装在原生移动 Web View (类似于 Phonegap)中。

部分功能要求应用程序将信息发布到由我们的一位客户控制的网络服务。更改此 Web 服务的范围很小，因为其他人正在使用它。我们使用 HTTP POST 发送 JSON 并从服务器接收响应。此响应的一部分是一个 JSESSIONID cookie，它管理我们与服务器的 session 。初始initSession()之后调用时，我们需要在每个 (AJAX) 请求中发送 JSESSIONID cookie。

当部署在移动设备上时，网络应用程序被包装在 native WebView 中，通过浏览到 file:///path/to/app/index.html 启动网络应用程序。 .

我们尝试的第一件事是要求我们的客户设置 Access-Control-Allow-Origin: *在他们的响应 header 中允许 CORS。然后我们尝试发布到服务器:

$.ajax({
  url: 'http://thirdparty.com/ws',
  data: data,
  type: "POST",
  dataType: "JSON",
  success: successCallback,
  error: failedCallback
});

监控请求，很明显没有包含 cookie。仔细观察有一个 special section in the CORS spec for dealing with user credentials ，其中包括 session cookie。所以我修改了 AJAX 调用以包含以下内容:

$.ajax({
  url: 'http://thirdparty.com/ws',
  data: data,
  type: "POST",
  dataType: "JSON",
  success: successCallback,
  error: failedCallback,
  xhrFields { withCredentials: true }
});

另一个错误，这次来自浏览器。更多阅读产生了以下内容:

If the third party server did not respond with an Access-Control-Allow-Credentials: true header the response would be ignored and not made available to web content.

Important note: when responding to a credentialed request, the server must specify a domain in the Access-Control-Allow-Origin header, and cannot use wild carding.

所以我们需要更改服务器的 header 以包含Access-Control-Allow-Credentials: true和 Access-Control-Allow-Origin到我们的起源。

我们终于到了我的问题:when loading a web page using the file:// protocol , Origin从 Web View 发送的请求 header 设置为 null .因此它不能被服务器解析，所以服务器不能在 Access-Control-Allow-Origin 中设置它。 .但是如果服务器不能设置Access-Control-Allow-Origin到*以外的东西我们无法发送凭证，包括 cookie。

所以我卡住了。该怎么办？ I saw a similar question posted here但我真的不明白建议的答案。任何帮助将不胜感激!

Answer 1

我意识到这个问题很老了，但我想无论如何我都会参与其中。对于 CORS 请求，浏览器会对它们进行预检。这意味着 - 无论您使用何种 $.ajax() 方法，都会向服务器发送一个 OPTIONS 请求。

这个预检 OPTIONS 请求实际上是在说:

"Hey there, foreign-server-from-some-other-domain, I want to send you a not-simple request (simple req's are not preflighted). My not-simple request going to have these kinds of headers and content type and so on. Can you let me know if this is okay?"

然后服务器将执行它所做的任何操作(可能检查某些配置或数据库)并以允许的来源、允许的 header 和/或允许的方法进行响应。

最后 - 如果预检 OPTIONS 请求收到允许实际 $.ajax() 方法运行的响应 - 它运行。

CORS 与 JSONP 不同。

综上所述 - 虽然 withCredentials 预检成功需要响应携带 Access-Control-Allow-Credentials header (如问题中所述)，即 IN添加 Access-Control-Allow-Origins 和 Access-Control-Allow-Methods 值，其中必须包括预期请求的各个方面。

例如 - 如果您从来源 http://foo-domain.com 发出 CORS POST 请求， header somevalue 到http://bar-domain.com，预检 OPTIONS 请求将发出，以便向 http://发出实际的发布请求bar-domain.com，OPTIONS 请求需要接收一个包含 http 的 Access-Control-Allow-Origins 值的响应://foo-domain.com。这可以是原始名称本身或 *。响应还需要有一个包含 POST 的 Access-Control-Allow-Methods 值。这也可能是 *。最后，如果我们希望我们的 somevalue header 被允许，则响应必须包含一个 Access-Control-Allow-Headers 值，其中包含我们的 somevalue header 键或 *。

回过头来 - 如果您无法控制服务器，或者无法让服务器允许您的 CORS 请求，您可以始终使用 JSONP 或某些 urlEncoded 数据类型和/或发出没有自定义 header 的简单请求。 GET、HEAD 和完整的 POST 请求通常是简单的请求。