javascript - 从文件 ://scheme 运行的应用程序的 CORS 错误

Question

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

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

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

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

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

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

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

所以我的问题:

1) 为什么我的应用程序在 Android/iOS 中没有 CORS 的情况下工作 - 是因为 CORS 不适用于 file://，还是 Cordova 是否在做一些事情以使其在设备中工作？

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

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

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 header 有两种方式来表示应该允许跨域 XHR:

发送 Access-Control-Allow-Origin: * (允许所有主机)

将您要允许的主机放入Origin后端 header

至于 file://他们将生成 的 URL空 Origin无法通过第二个选项(回声)授权。
如 mentioned :

Cross-domain policy does not apply to PhoneGap (for a variety of reasons, basically because your app is essentially running off the file:// URI on-device).

Please be aware that you will have to set up a whitelist for your apps to access these external domains.

至于 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`

这是更多与 Cordova 相关的答案:

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 :)