Firebase 3.0 与 webpack 捆绑时抛出跨域错误

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 包中同时包含浏览器和节点版本（分别参见“浏览器”和“主”入口点）。

确保您已安装最新的 Firebase (3.0.3) - 早期版本在我们在 Browserify/WebPack 中导出 firebase 命名空间的方式中存在错误。