从 file:// 方案运行的应用程序的 CORS 错误

IT技术 javascript ajax angularjs cordova cors
2021-03-03 02:10:43

我有一个 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 webviews 中运行时 Origin 会是什么。我决定在我的设备上进行构建和部署,并希望在远程调试中看到相同的错误(iOS 的 Safari 和 Android 的 Weinre),但令我惊讶的是它有效(不发送任何 CORS 标头)!我还发现在这两种设备中,应用程序都在 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 标头

3) 除了阻止对远程服务器的 XHR 请求之外,Chrome 还阻止了我的应用程序模板(我使用的是单独的文件),见下文。这是我的应用程序的潜在问题,还是我不需要担心的 Chrome 问题?

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

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

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

至于file://URL,它们将产生一个无法通过第二个选项 ( echo-back )授权null Origin

至于提到的

跨域策略不适用于 PhoneGap(出于多种原因,基本上是因为您的应用程序本质上是在设备上运行 file:// URI)。

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

至于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 的更多信息:

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

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

嘿@Raman 我有完全相同的问题!检查stackoverflow.com/questions/39720465/cordova-cors-ios
2021-04-21 02:10:43
感谢您的答复。我确实看到了您发布的大部分链接。根据我的 Q3,Chrome 阻止了我的远程服务器和本地模板请求,我可以忽略这一点而只使用 Safari 吗?
2021-04-24 02:10:43
@KevIn​​Sol 我会忽略 Chrome 并使用 Safari 或 Firefox 进行本地开发。请检查我对答案的最后更新 - 我包含了一个链接,指向 Chromium 开发人员的讨论,该讨论将该问题标记为无法为他们解决。
2021-05-11 02:10:43
谢谢 Blaise,过去几天我实际上一直在使用 Safari,因为它可以轻松地在 iOS 上进行远程调试。我看到您发布的链接已经很旧了,但我想情况还是一样。谢谢你的帮助!
2021-05-15 02:10:43
我遇到了相反的问题——我的 Cordova 应用程序坚持发送,Origin: file://而不是null origin像这个答案所暗示的那样(并且应该)发送。显然服务器(正确地)拒绝了这个来源。参见例如:github.com/playframework/playframework/issues/5193白名单没有帮助。
2021-05-15 02:10:43