Question

我遇到Firebase 3.0.3的问题，它会抛出以下错误：

FIREBASE WARNING: Exception was thrown by user callback. Error: Blocked a frame with origin "https://localhost:3000" from accessing a cross-origin frame.
at Error (native)
at derez (<anonymous>:995:515)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208)
at derez (<anonymous>:1001:208) 

Uncaught SecurityError: Blocked a frame with origin "https://localhost:3000" from accessing a frame with origin "https://falkor.firebaseapp.com". Protocols, domains, and ports must match.

我的堆栈使用React 15.1.0，Redux 3.5.2，Babel-Core 6.9.0和webpack 1.13.1。

以下是重要部分：

// ./src/constants/index.js

import * as firebase from 'firebase';
firebase.initializeApp(JSON.parse(process.env.FIREBASE_CONFIG));

export const ref = firebase.database().ref();
export const auth = firebase.auth();




// ./src/actions/auth.js

import * as actions from './';
import { ref, auth } from '../constants';

export const loadAuth = () =>
  (dispatch, getState) => {
    const { subscribed } = getState().firebase;
    if (subscribed.indexOf('auth') < 0) {
      dispatch(actions.fbaseSubscribed('auth'));
      auth.onAuthStateChanged(user => {
        if (user) {
          dispatch(loadMe(user.uid));
          dispatch(actions.auth(user));
        }
      });
    }
  };

const serialize = data => ({ [data.key]: data.val() });

export const loadMe = (uid) =>
  (dispatch, getStore) => {
    const { subscribed } = getStore().firebase;
    if (subscribed.indexOf('me') < 0) {
      dispatch(actions.fbaseSubscribed('me'));
      const item = ref.child('teamMembers').child(uid);

      item.on('child_added',   data => dispatch(actions.me(serialize(data))));
      item.on('child_changed', data => dispatch(actions.me(serialize(data))));
      item.on('child_removed', data => dispatch(actions.me(serialize(data))));
    }
  };

export const login = ({email, password}) =>
  () => {
    auth.signInWithEmailAndPassword(email, password).catch(err => console.error(err));
  };

export const renewSession = token =>
  () => {
    auth.signInWithCustomToken(token).catch(err => console.error(err));
  };

当我尝试quickstart app时，我不会遇到在页面头部初始化firebase配置的任何问题。当我使用NPM安装模块并将其与webpack捆绑在一起时，我只遇到了这个问题。

非常感谢任何帮助，我现在已经摸不着头几个小时了。

Answer 1

我没有看到您的整个代码，但是因为它对我有用，请尝试不向整个用户发送操作

export const loadAuth = () =>
  (dispatch, getState) => {
    const { subscribed } = getState().firebase;
    if (subscribed.indexOf('auth') < 0) {
      dispatch(actions.fbaseSubscribed('auth'));
      auth.onAuthStateChanged(user => {
        if (user) {
          dispatch(loadMe(user.uid));
          //dispatch(actions.auth(user)); // not dispatch the entire user. When I changed this my code worked
          dispatch(actions.auth(user.email));
        }
      });
    }
  };

更新1

我创建了这个简单的转换函数来解析Firebase用户对象中的数据：https://gist.github.com/douglascorrea/003ae6a6b11f19c97d6ee5b28d0d9eef

此外，如果您想了解有关此问题的更多信息，可以在Firebase群组中跟进此主题：https://groups.google.com/d/msg/firebase-talk/Lp6I9uS0PAo/AbHwr_03DwAJ

更新2 我使用React Redux创建了一个Firebase 3.0启动器。

您可以查看：Firebase 3.0 starter with React Redux

Answer 2

这里只是猜测，但使用ES6 import语句，您应该使用：

import * as firebase from 'firebase';

使用ES5 require（）时：

var firebase = require('firebase');

请注意，Firebase npm软件包中包含浏览器和节点版本（分别参见＆＃39;浏览器＆＃39;以及＆＃39;主要＆＃39;入口点）。

确保安装了最新的Firebase（3.0.3） - 早期版本在Browserify / WebPack中导出firebase命名空间的方式存在错误。

与webpack捆绑在一起时，Firebase 3.0会引发跨源错误

2 个答案: