CORS,Cordova,AngularJs $ http和file://混乱

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"

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

因此,不得不首次考虑这个问题,我想知道当应用程序在Android/iOS网页浏览器中运行时,Origin会是什么.我决定在我的设备上进行构建和部署,并期望在远程调试中看到相同的错误(适用于iOS的Safari和适用于Android的Weinre),但令我惊讶的是它可以工作(不发送任何CORS标头)!我还发现,在两个设备中,应用程序在webview下以file://方案运行,而不是(我假设的)手机操作系统提供的某些类型的http服务器.

因此研究似乎表明文件不需要CORS:// - 这样的"网站"可以访问任何域上的任何XHR资源.但是,当我在桌面浏览器上测试时,我发现虽然Safari不需要CORS文件://但确实如此,FireFox可以在没有CORS的情况下工作

所以我的问题:

1)为什么我的应用程序在Android/iOS中没有CORS工作 - 是因为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,它们将产生一个无法通过第二个选项(echo-back)授权的null .Origin

至于提到的:

跨域策略不适用于PhoneGap(出于各种原因,主要是因为您的应用实际上是在文件上运行:// URI on-device).

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

至于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项目的问题跟踪器#40787.他们将这些问题标记为无法解决,因为这种行为是通过设计发生的.

提出了一种解决方法,只需在Chrome中关闭CORS以进行开发,从而启动chrome --allow-file-access-from-files --disable-web-security

例如,对于Windows

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

以下是一些与cordova相关的答案:

• CORS和phonegap应用程序
• Apache Cordova中的域白名单 - 一种控制对外部域的访问的安全模型.

有关CORS的更多信息,请查看这些资源:

• 跨源资源共享和文件://
• 一个很好的CORS教程:http://www.html5rocks.com/en/tutorials/cors/
• 解决原产地政策
• HTTP访问控制(CORS)(Mozilla)

检查浏览器对CORS的支持:

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

并在W3C上正式记录CORS规范 :)