从 file:// 方案运行的应用程序的 CORS 错误

Question

我有一个 AngularJS/Cordova 应用程序，它轮询远程服务器上的 JSON 服务：

$http({method: 'GET', url: 'http://example.com/index.php'})

在浏览器中开发并运行我的 Intranet apache 服务器 (http://dev) 我得到“不存在 'Access-Control-Allow-Origin' 标头”，所以我通过添加来解决这个问题：

Header set Access-Control-Allow-Origin "http://dev"

一切正常，我在 Chrome 开发工具中看到了Origin:http://dev。

所以，不得不第一次考虑这个问题，我想知道当应用程序在 Android/iOS webviews 中运行时 Origin 会是什么。我决定在我的设备上进行构建和部署，并希望在远程调试（iOS 的 Safari 和 Android 的 Weinre）中看到相同的错误，但令我惊讶的是它可以工作（不发送任何 CORS 标头）！我还发现，在这两种设备中，应用程序都在 file:// 方案下的 web 视图中运行，而不是（我假设的）手机操作系统提供的某种 http 服务器。

因此研究似乎表明文件：// 不需要 CORS - 这样的“站点”可以访问任何域上的任何 XHR 资源。但是，当我在桌面浏览器上测试它时，我发现虽然 Safari 不需要文件：// 的 CORS，但 Chrome 可以，而 FireFox 可以在没有 CORS 的情况下以任何方式工作

所以我的问题：

1) 为什么我的应用在没有 CORS 的情况下在 Android/iOS 中运行 - 是因为 CORS 不适用于 file://，还是 Cordova 是否正在采取措施使其在设备中运行？

我的配置中有<access origin="*"/>

2) 如果在 Q1 的未决答案中，我应该在安全站点上并明确允许来自应用程序的请求，那么您为 file://“hosts”赋予 Access-Control-Allow-Origin 什么值？在我的调试中，来自 file://

的请求中没有 Origin 标头

3) 除了阻止对远程服务器的 XHR 请求外，Chrome 还阻止了我的应用程序模板（我正在使用单独的文件），见下文。这是我的应用程序的潜在问题，还是只是我不需要担心的 Chrome 问题？

XMLHttpRequest cannot load file:///Volumes/projects/phonegap/www/templates/tabs.html. Cross origin requests are only supported for HTTP. 

Answer 1

CORS 标头有两种方式表明应允许跨域 XHR：

• 发送Access-Control-Allow-Origin: *（允许所有主机）
• 将您希望允许的主机放入后端的Origin 标头中

对于file:// URL，它们将产生一个 null Origin，无法通过第二个选项（echo-back）进行授权。 p>

作为mentioned:

跨域策略不适用于 PhoneGap（出于多种原因，主要是因为您的应用本质上是在设备上的 file:// URI 上运行的）。

请注意，您必须为您的应用设置白名单才能访问这些外部域。

至于Chrome的问题，可以在开发者控制台看到：

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///C:/2.html XMLHttpRequest cannot load file:///C:/2.html. Received an invalid response. Origin 'null' is therefore not allowed access.

在Chromium project's issue tracker, #40787 上进行了讨论。他们将问题标记为无法解决，因为这种行为是有意发生的。

提出了一种解决方法，即出于开发目的在 Chrome 中简单地关闭 CORS，以 --allow-file-access-from-files --disable-web-security 开始 chrome

例如适用于 Windows

`C:\Users\YOUR_USER\AppData\Local\Google\Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security`

这里有一些与科尔多瓦相关的答案：

• CORS and phonegap apps
• Domain whitelisting in Apache Cordova - 一种控制对外部域的访问的安全模型。

查看这些资源以获取有关 CORS 的更多信息：

• Cross-Origin resource sharing and file://
• A nice CORS tutorial: http://www.html5rocks.com/en/tutorials/cors/
• Working around origin policy
• HTTP access control (CORS) (Mozilla)

还要检查浏览器对 CORS 的支持：

• http://caniuse.com/#feat=cors

记录在案formal CORS specification on W3C :)