从 file://方案运行的应用程序的 CORS 错误 [英] CORS error for application running from file:// scheme

问题描述

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

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

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

在浏览器中开发并运行我的 Intranet apache 服务器 (http://dev) 我得到不存在‘Access-Control-Allow-Origin’标头"所以我解决了这个问题添加:

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"

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

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

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

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.

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

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

所以我的问题:

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

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?

我的配置中有

2) 如果在对 Q1 的待定答案中，我想要在安全站点上并明确允许来自应用程序的请求，那么您为 file://hosts"赋予 Access-Control-Allow-Origin 什么值?在我的调试中，来自 file://

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) 除了阻止对远程服务器的 XHR 请求之外，Chrome 还会阻止我的应用程序模板(我使用的是单独的文件)，见下文.这是我的应用程序的潜在问题，还是我不需要担心的 Chrome 问题?

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. 

推荐答案

CORS 标头有两种方式来表示应该允许跨域 XHR:

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

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

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

至于 file:// URL，它们将产生一个 null Origin，它不能通过第二个选项(回声).

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

如提到:

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

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问题，可以在开发者控制台看到:

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

加载资源失败:net::ERR_FILE_NOT_FOUND file:///C:/2.htmlXMLHttpRequest 无法加载 file:///C:/2.html.收到无效响应.因此，不允许访问原点 'null'.

讨论了 Chromium 项目的问题跟踪器，#40787.他们将问题标记为无法解决，因为该行为是设计使然.

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.

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

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

例如适用于 Windows

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 和 phonegap 应用
• Apache Cordova 中的域白名单 - 一种控制对外部域的访问的安全模型.

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

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

Check these resources for more info on CORS:

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

还检查浏览器对 CORS 的支持:

Check also Browser support for CORS:

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

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

这篇关于从 file://方案运行的应用程序的 CORS 错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！