从文件//scheme运行的应用程序出现CORS错误

CORS error for application running from file:// scheme

本文关键字：CORS 应用程序 错误 文件 scheme 运行      更新时间：2023-09-26

我有一个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。

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

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

所以我的问题是：

1） 为什么我的应用程序在Android/iOS中没有CORS也能工作？是因为CORS不适用于文件：//，还是Cordova在做什么让它在设备中工作？

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

2） 如果在等待对Q1的回答时，我应该在安全的网站上并明确允许来自应用程序的请求，那么您给文件//"hosts"的访问控制允许来源的值是多少？在我的调试中，来自文件的请求中没有Origin标头：//

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

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

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

  • 发送Access-Control-Allow-Origin: *（允许所有主机）
  • 通过后端将要允许的主机放入Origin标头

对于file:// URL，它们将生成一个nullOrigin，该值无法通过第二个选项（回显）进行授权。

如前所述：

跨域策略不适用于PhoneGap（由于各种原因，主要是因为您的应用程序基本上是在设备上运行文件：//URI）。

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

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

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

有一个关于Chromium项目的问题跟踪器#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和phonegap应用程序
  • Apache Cordova中的域白名单-一种控制外部域访问的安全模型

查看这些资源了解更多关于CORS的信息：

  • 跨来源资源共享和文件：//
  • 一个不错的CORS教程：http://www.html5rocks.com/en/tutorials/cors/
  • 围绕原产地政策开展工作
  • HTTP访问控制（CORS）（Mozilla）

另请查看浏览器对CORS:的支持

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

为了记录W3C上正式的CORS规范：）

相关文章：