javascript - 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

我没有看到您的完整代码，但由于它对我有用，请尝试不对整个用户分派(dispatch)操作

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

---