【问题标题】:Angular / Ionic with Angularfire: iOS: Blocked a frame with origin "http://localhost:8100"带有 Angularfire 的 Angular / Ionic:iOS:阻止了原点为“http://localhost:8100”的框架
【发布时间】:2019-07-08 14:22:18
【问题描述】:

这个 Ionic3 (Angular 5) 项目必须从旧的 AngularFire 3.x 升级到 "@angular/fire": "^5.2.1"; 自那次升级以来,当使用设置为 iPhone/iPad 的“设备模式”在 Chrome 中运行应用程序时,会发生奇怪的行为。不会发生在 Android 模拟上。在某些时候(我无法识别),angularfire(我猜?)似乎在 body 元素中添加了一个 iframe:

<iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" tabindex="0" vspace="0" width="100%" 
    id="I0_1562593422051"
    name="I0_1562593422051" 
    src="https://XXXXXXXXX.firebaseapp.com/__/auth/iframe?apiKey=YYYYYYYYYYYYYY&amp;appName=ZZZZZZZZZZZZZZZ&amp;v=6.2.4&amp;usegapi=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_GB.4xsMIUspm18.O%2Fam%3DwQE%2Fd%3D1%2Frs%3DAGLTcCO_dMVTlnY55ZJNnloXSQJ2GsU_yw%2Fm%3D__features__#id=I0_1562593422051&amp;_gfid=I0_1562593422051&amp;parent=http%3A%2F%2Flocalhost%3A8100&amp;pfname=&amp;rpctoken=33463188" style="position: absolute; top: -100px; width: 1px; height: 1px;"></iframe>

尽管这在 firebaseapp.com 子域上完美运行,但 localhost(在 cordova 中使用)仅在 iOS 上遇到以下问题(不适用于 android,不适用于 chrome)...

欢迎任何建议,这是排除故障的第二天..!提前致谢。

一些不起眼的堆栈表明 core.js:1449 存在错误:

core.js:1449 ERROR DOMException: Blocked a frame with origin "http://localhost:8100" from accessing a cross-origin frame.
    at e (<anonymous>:1:62513)
    at e (<anonymous>:1:63249)
    at e (<anonymous>:1:63249)
    at e (<anonymous>:1:63249)
    at e (<anonymous>:1:63249)
    at e (<anonymous>:1:63249)
    at e (<anonymous>:1:63249)
    at e (<anonymous>:1:63249)
    at e (<anonymous>:1:63249)
    at e (<anonymous>:1:63075)
defaultErrorLogger  @   core.js:1449
ErrorHandler.handleError    @   core.js:1510
IonicErrorHandler.handleError   @   ionic-error-handler.js:61
next    @   core.js:5508
schedulerFn @   core.js:4342
SafeSubscriber.__tryOrUnsub @   Subscriber.js:253
SafeSubscriber.next @   Subscriber.js:191
Subscriber._next    @   Subscriber.js:129
Subscriber.next @   Subscriber.js:93
Subject.next    @   Subject.js:53
EventEmitter.emit   @   core.js:4322
(anonymous) @   core.js:4782
t.invoke    @   polyfills.js:3
r.run   @   polyfills.js:3
NgZone.runOutsideAngular    @   core.js:4708
onHandleError   @   core.js:4782
t.handleError   @   polyfills.js:3
r.runTask   @   polyfills.js:3
e.invokeTask    @   polyfills.js:3
i.isUsingGlobalCallback.invoke  @   polyfills.js:3
n   @   polyfills.js:3
setTimeout (async)      
o   @   polyfills.js:3
t.scheduleTask  @   polyfills.js:3
onScheduleTask  @   polyfills.js:3
t.scheduleTask  @   polyfills.js:3
r.scheduleTask  @   polyfills.js:3
r.scheduleMacroTask @   polyfills.js:3
(anonymous) @   polyfills.js:3
o.<computed>    @   polyfills.js:2
hostReportError @   hostReportError.js:8
setTimeout (async)      
o   @   polyfills.js:3
t.scheduleTask  @   polyfills.js:3
r.scheduleTask  @   polyfills.js:3
r.scheduleMacroTask @   polyfills.js:3
(anonymous) @   polyfills.js:3
o.<computed>    @   polyfills.js:2
AsyncObserver.scheduleEvent @   index.cjs.js:18817
AsyncObserver.next  @   index.cjs.js:18806
QueryListener.raiseInitialEvent @   index.cjs.js:16065
QueryListener.onViewSnapshot    @   index.cjs.js:16007
EventManager.onWatchChange  @   index.cjs.js:15944
(anonymous) @   index.cjs.js:16653
step    @   tslib.es6.js:99
(anonymous) @   tslib.es6.js:80
fulfilled   @   tslib.es6.js:70
t.invoke    @   polyfills.js:3
r.run   @   polyfills.js:3
(anonymous) @   polyfills.js:3
t.invokeTask    @   polyfills.js:3
r.runTask   @   polyfills.js:3
o   @   polyfills.js:3
e.invokeTask    @   polyfills.js:3
p   @   polyfills.js:2
v   @   polyfills.js:2

我的 package.json 依赖项:

   "dependencies": {
        "@angular/animations": "5.2.11",
        "@angular/cdk": "^5.1.0",
        "@angular/common": "5.2.11",
        "@angular/compiler": "5.2.11",
        "@angular/compiler-cli": "5.2.11",
        "@angular/core": "5.2.11",
        "@angular/fire": "^5.2.1",
        "@angular/flex-layout": "^5.0.0-beta.15",
        "@angular/forms": "5.2.11",
        "@angular/http": "5.2.11",
        "@angular/platform-browser": "5.2.11",
        "@angular/platform-browser-dynamic": "5.2.11",
        "@ionic-native/core": "~4.11.0",
        "@ionic-native/splash-screen": "~4.11.0",
        "@ionic-native/status-bar": "~4.11.0",
        "@ionic/pro": "^2.0.3",
        "@ionic/storage": "^2.2.0",
        "@ngrx/effects": "^5.2.0",
        "@ngrx/store": "^5.2.0",
        "@ngrx/store-devtools": "^5.2.0",
        "@types/cordova": "0.0.34",
        "cordova-android": "^7.1.4",
        "cordova-browser": "^5.0.4",
        "cordova-ios": "^4.5.5",
        "cordova-plugin-device": "^2.0.2",
        "cordova-plugin-file": "^6.0.1",
        "cordova-plugin-file-transfer": "^1.7.1",
        "cordova-plugin-ionic": "^5.3.1",
        "cordova-plugin-ionic-keyboard": "^2.1.3",
        "cordova-plugin-ionic-webview": "^2.5.1",
        "cordova-plugin-splashscreen": "^5.0.2",
        "cordova-plugin-statusbar": "^2.4.2",
        "cordova-plugin-whitelist": "^1.3.3",
        "firebase": "^6.2.4",
        "ionic-angular": "3.9.2",
        "ionic2-auto-complete": "^1.6.2-alpha",
        "ionicons": "3.0.0",
        "ng2-nvd3": "^2.0.0",
        "ngx-perfect-scrollbar": "^5.3.5",
        "rxjs": "6.2.0",
        "rxjs-compat": "6.2.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.26"
    },

【问题讨论】:

    标签: angular firebase ionic3 angularfire2 angularfire


    【解决方案1】:

    它与 Chrome - 桌面版有关。 W10 和 Mac 在“设备模式”、模拟和 iOS 设备下的行为相同。当愿意监视服务器端过滤集合时执行 1 个或多个 .stateChange 调用时会发生这种情况。随机发生 - 在单独的沙箱中测试。 正如建议的那样,这不会发生在 iOS 的实际 Safari 上。即使是 iOS 版 Chrome 也表现得很好,所以这个问题可以被认为是“与开发环境有关”。

    【讨论】:

      猜你喜欢
      • 2014-11-09
      • 1970-01-01
      • 2019-08-04
      • 2018-05-31
      • 2016-09-28
      • 2019-02-05
      • 2017-06-25
      • 2019-01-19
      • 2013-05-19
      相关资源
      最近更新 更多