javascript - 使用 axios 进行 Firebase OAuth 登录和数据访问

Question

我对 Axios 很陌生，对 OAuth 和 Firebase 也很陌生，所以我确定我错过了一些愚蠢的东西......

我正在尝试使用 firebase 的身份验证提供程序功能创建登录，然后使用 Axios 在我的数据库中创建用户配置文件。 (我必须根据我收到的数据进行大量其他 API 调用，并且只使用 Axios 来处理所有事情会非常方便。)

这是我到目前为止所拥有的。

  authenticate() {
    var provider = new firebase.auth.GithubAuthProvider();
    console.log(provider);
    firebase.auth().signInWithPopup(provider)
      .then((res) => {
        console.log(res);
        if (res.credential) {
          var token = res.credential.accessToken;
        }
        const user = axios.create({
          baseURL: fbaseUrl,
          withCredentials: true, // newly added
          headers: {
            Authorization: `Bearer ${token}`, // cf firebase docs https://firebase.google.com/docs/reference/rest/database/user-auth
          }
        });
        this.setState({uid: res.user.uid, useraxios: user, token: token});
      }).catch((err) => {
        console.log(err.message);
      }); 
  }

  testPost() {
    this.state.useraxios.post(`/users.json`, { id: this.state.uid, joinedOn: moment() })
      .then((res) => console.log(res))
      .catch((err) => console.log(err.message));  /// this errors out
  }

我目前遇到的错误是没有“Access-Control-Allow-Credentials” header ，因此不允许访问 localhost，我认为这是 Firebase 规则中我必须解决的问题。在我添加 withCredentials: true 之前行，我刚刚收到“不允许访问”的响应。

我也试过

    const user = axios.create({
      baseURL: `${fbaseUrl}/users/${res.user.uid}.json?auth=${token}`
    });

和

      firebase.auth().currentUser.getToken(true).then((token) => {
       const user = axios.create({
          baseURL: `${fbaseUrl}/users/${res.user.uid}.json?auth=${token}`
        });

和

      firebase.auth().currentUser.getToken(true).then((token) => {
       const user = axios.create({
          baseURL: `${fbaseUrl}`,
          headers: {Authorization: token}
        });

根据 this stackoverflow question返回 401 Unauthorized 错误。

当我将 read & write 都设置为 true 时，发布到数据库完全没问题，所以我如何格式化 URL 或其他东西不是问题。

我假设有几个问题，一个是我的 axios.create config 和另一个使用我的 Firebase 规则，但我已经阅读了两者的文档，但仍然非常茫然。这是一个 react 应用程序，但我 98% 确定 react 的东西不是问题。

我至少在正确的轨道上吗？ (尝试将 axios 用于更适合 firebase 的内置方法的东西，我是不是傻瓜......？)任何帮助将不胜感激。

Answer 1

它与您的功能配置有关。您需要将其添加到您的 firebase 函数/index.js 中，并使用 cors 配置您的函数。

const cors = require('cors')({origin: true});

更多详情请引用这个网址: Enabling CORS in Cloud Functions for Firebase