CORS，科尔多瓦，AngularJs $ http和文件：//混乱 [英] CORS, Cordova, AngularJs $http and file:// confusion

问题描述

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

  $ HTTP（{方法：GET，网址：http://example.com/index.php'}）
 

在开发的浏览器，并运行了我的内网的Apache服务器（的http：//开发）我得到没有访问控制 - 允许 - 原产地标题为present，让我解决这个问题，加入：

 标题设置访问控制 - 允许 - 产地的http：//开发
 

一切工作正常，我看产地：HTTP：//开发在我的Chrome浏览器开发工具

所以，不必考虑这是第一次，我不知道起源会时，应用程序在Android / iOS的webviews运行。我决定做一个构建和部署在我的设备，并期望看到远程调试（iOS和Weinre Android的Safari浏览器）相同的错误，但让我吃惊的它工作（不发送任何CORS头）！我还发现，在这两种设备上的应用程序运行在文件下的WebView：//方案，而不是（我认为）由手机操作系统提供了一些各种各样的HTTP服务器

所以研究似乎表明，不需要文件CORS：// - 这样的网站可以访问任何XHR资源的任何域但是，当我测试这个桌面浏览器中我发现，虽然Safari浏览器并不需要。 CORS文件：//而Chrome确实和Firefox的作​​品无论采用哪种方式，而不CORS

所以我的问题：

1）为什么我的应用程序工作没有CORS在安卓/ iOS的 - 难道是因为CORS并不适用于文件：//，或者是科尔多瓦做一些事情，使之在设备正常工作

？

我有＆LT;获得原产地=*/＆GT; 在我的配置

2）如果，等待答案Q1，我想在安全的网站，并明确允许来自应用程序的请求，你给什么价值访问控制 - 允许 - 原产地文件：//主人？在我的调试没有从文件中请求没有产地标头：//

3）除阻断XHR请求到远程服务器，Chrome浏览器也挡住了我的应用程序模板（我使用的是单独的文件），见下文。这是我的应用程序，或者只是一个浏览器的问题一个潜在的问题，我并不需要担心？

  XMLHtt prequest无法加载文件：///Volumes/projects/phonegap/www/templates/tabs.html。跨起源请求仅支持HTTP。
 

解决方案

有两种方式CORS头，表示已通过跨域XHR应该被允许的：

• 发送访问控制 - 允许 - 产地：* （允许所有主机）
• 把你想允许进入原产地头被你的后端主机

对于文件：// 的网址，他们会产生的空 原产地不能经由第二选项授权（的回声回的）。

由于href="http://stackoverflow.com/questions/21297169/cors-and-phonegap-apps">提到

  

跨域策略并不适用于PhoneGap的（适用于各种原因，主要是因为你的应用程序基本上流失文件：// URI的设备）。

     

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

至于在 Chrome浏览器的问题，它可以在开发者控制台中可以看出：

无法加载资源：净:: ERR_FILE_NOT_FOUND文件：/// C：/2.html XMLHtt prequest无法加载文件：/// C：/2.html。收到了无效响应。原产地'空'，因此没有允许访问。

有在铬项目的问题跟踪，＃40787 讨论。它们记载了问题的不会解决作为这种行为正在发生由设计。

有一个解决办法提出简单地关掉CORS在Chrome为发展宗旨，开始镶边 - 让文件存取的档案 - 禁用网络安全

例如。对于Windows

 `C：\用户\ YOUR_USER \应用程序数据\本地\谷歌\浏览器\应用程序\的chrome.exe --allow文件存取的档案 - 禁用基于网络security`
 

下面是一些更多的科尔多瓦相关答案：

• CORS和PhoneGap的应用
• <一个href="http://docs.phonegap.com/en/1.8.0rc1/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide">Domain白名单在Apache的科尔多瓦 - 控制访问外域的安全模型

检查这些资源对CORS的详细信息：

• <一个href="http://stackoverflow.com/questions/5138057/cross-origin-resource-sharing-and-file">Cross-Origin资源共享和文件：//
• 一个很好的CORS教程：http://www.html5rocks.com/en/tutorials/cors/
• 工作围绕原点政策
• HTTP访问控制（CORS）（Mozilla的）

有关CORS检查也支持的浏览器：

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

和备案对W3C 正式CORS规范：）

I have an AngularJS/Cordova app which polls a JSON service on a remote server:

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

Developing in the browser and running off my intranet apache server (http://dev) I get "No 'Access-Control-Allow-Origin' header is present" so I fix this by adding:

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

All works fine, and I see Origin:http://dev in my Chrome dev tools.

So, having to think about this for the first time, I wonder what the Origin will be when the app runs in the Android/iOS webviews. I decide to do a build and deploy on my devices and expect to see the same error in remote debugging (Safari for iOS and Weinre for Android), but to my surprise it works (without sending any CORS headers)! I also find that in both devices the app runs in the webview under the file:// scheme, rather than (what I assumed) a http server of some sorts provided by the phone OS.

So research seems to suggest that CORS is not required for file:// - such a "site' may access any XHR resource on any domain. But, when I test this on desktop browsers I find that while Safari does not need CORS for file:// but Chrome does, and FireFox works either way without CORS

So my questions:

1) why is my app working without CORS in Android/iOS - is it because CORS does not apply to file://, or, is Cordova doing something to make it work in the device?

I have <access origin="*"/> in my config

2) if, pending answers to Q1, I should want to be on the safe site and explicitly allow requests from apps, what value do you give Access-Control-Allow-Origin for file:// "hosts"? in my debugging there is no Origin header in the requests from file://

3) in addition to blocking the XHR request to the remote server, Chrome is also blocking my app templates (I'm using separate files), see below. Is this a potential issue with my app, or just a Chrome issue that I do not need to worry about?

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

解决方案

There are two ways for CORS headers to signal that a cross-domain XHR should be allowed:

• sending Access-Control-Allow-Origin: * (allow all hosts)
• put the host you would like to allow into the Origin header by your backend

As for the file:// URLs they will produce a null Origin which can't be authorized via the second option (echo-back).

As 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.

As for the Chrome problem, which can be seen in the developer's console:

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.

there was a discussion on Chromium project's issue tracker, #40787. They mark the issues as won't fix as that behaviour is happening by design.

There is a workaround proposed to simply switch off CORS in Chrome for development purposes, starting chrome with --allow-file-access-from-files --disable-web-security

e.g. for Windows

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

Here is some more cordova related answer:

• CORS and phonegap apps
• Domain whitelisting in Apache Cordova - a security model that controls access to outside domains.

Check these resources for more info on 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)

Check also Browser support for CORS:

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

And for the record formal CORS specification on W3C :)

这篇关于CORS，科尔多瓦，AngularJs $ http和文件：//混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！