Axios（React）获取请求从firebase返回403，但适用于邮递员

Question

我正在开发一个遵循 Classed 的社交媒体应用程序，但我一直坚持将 firebase 云功能与 CRA 集成。我尝试在package.json 中使用代理，但它给了我一个 403 错误。

Firebase 函数文件

//?===================?
//?IMPORTS AND VARIABLES********
//????\\\*******************



const { FBAuth } = require('./utilities/middleware/middleware');
const cors = require("cors");
const functions = require('firebase-functions');
const {
  getAllScreams,
  postScream,
  likeScream,
  deleteScream,
  unlikeScream,
} = require('./handlers/screams/screams');
const { login } = require('./handlers/users/login');
const { signup } = require('./handlers/users/signup');
const { uploadImage } = require('./handlers/users/userMedia');
const {
  addUserDetails,
  getAuthenticatedUser,
  getScream,
  getusUserDetails,
  markNotificationsRead,
} = require('./handlers/users/userInfo');
const { postComment } = require('./handlers/screams/comments/comments');
const admin = require('./utilities/admin');
const { db } = require('./utilities/admin');
const app = require('express')();

//*===================>
//*ROUTES************
//******************* */
//? screams routes
app.get('/screams', getAllScreams);
app.post('/screams', FBAuth, postScream);
app.get('/scream/:screamId', getScream);
app.get('/screams/:screamId/like', FBAuth, likeScream);
app.get('/screams/:screamId/unlike', FBAuth, unlikeScream);
app.get('/screams/:screamId/delete', FBAuth, deleteScream);
app.post('/screams/:screamId/comment', FBAuth, postComment);
//*user routes
app.post('/signup', signup);
app.post('/login', login);
app.post('/user/image', FBAuth, uploadImage);
app.post('/user', FBAuth, addUserDetails);
app.get('/user', FBAuth, getAuthenticatedUser);
//TODO Get user details and get notifications
app.get('/user/:handle', getusUserDetails);
app.get('notifications', FBAuth, markNotificationsRead)
exports.api = functions.https.onRequest(app);

//*Creat notifications
exports.createNotificationOnLike = functions.firestore
  .document('likes/{id}')
  .onCreate((snapshot) => {
   return db.doc(`/screams/${snapshot.data().screamId}`)
      .get()
      .then((doc) => {
        if (doc.exists) {
          return db.doc(`/notifications/F${snapshot.id}`).set({
            createdAt: new Date().toISOString(),
            recipient: doc.data().userHandle,
            sender: snapshot.data().userHandle,
            type: 'like',
            read: false,
            screamId: doc.id,
          });
        }
      })
      .catch((err) => {
        console.err(err);
      });
  });

exports.createNotificationOnCreate = functions.firestore
  .document('comments/{id}')
  .onCreate((snapshot) => {
    return db.doc(`/screams/${snapshot.data().screamId}`)
      .get()
      .then((doc) => {
        if (doc.exists && doc.data().userHandle!== snapshot.data().userHandle) {
          return db.doc(`/notifications/F${snapshot.id}`).set({
            createdAt: new Date().toISOString(),
            recipient: doc.data().userHandle,
            sender: snapshot.data().userHandle,
            type: 'comment',
            read: false,
            screamId: doc.id,
          });
        }
      })
      .catch((err) => {
        console.err(err);
      });
  });

exports.deleteNotificationOnLike = functions.firestore
  .document('likes/{id}')
  .onDelete((snapshot) => {
  return db.doc(`/screams/${snapshot.data().screamId}`)
      .get()
      .then((doc) => {
        if (doc.exists && doc.data().userHandle!== snapshot.data().userHandle) {
          return db.doc(`/notifications/${snapshot.id}`).delete();
        }
      })
      .catch((err) => {
        console.err(err);
      });
  });


  exports.onUserImageChange = functions.firestore.document(`/users/{userId}`)
  .onUpdate(change=>{
    console.log(change.before.data());
    if (change.before.data().imageUrl !== change.after.data().imageUrl){
      let batch = db.batch();
      return db.collection("screams").where("userHandle", "==", change.before.data().handle).get()
      .then(data=>{
        data.forEach(doc=>{
          const scream = db.doc(`/screams/${doc.id}`);
          batch.update(scream, { userImage: change.after.data().imageUrl })
        });
        return batch.commit();
      }); 
    }
  })

  exports.onScreamDeleted = functions.firestore.document(`/users/{userId}`)
  .onDelete((snapshot, context)=>{
    const screamId = context.params.screamId;
    const batch= db.batch();
    return db.collection('comments').where('screamId', '==', screamId).get()
    .then(data=>{
      data.forEach(doc=>{
        batch.delete(db.doc(`/likes/${doc.id}`));
      })
      return db.collection('likes').where('screamId', '==', screamId).get();
    })
    .then(data=>{
      data.forEach(doc=>{
        batch.delete(db.doc(`/notifications/${doc.id}`));
      })
      return db.collection('notifications').where('screamId', '==', screamId).get();
    })
    .then(data=>{
      data.forEach(doc=>{
        batch.delete(db.doc(`/notifications/${doc.id}`));
      })
      return batch.commit();
    })
    .catch(err=>{
      console.error(err);
      return res.status(500).json({error: err.code})
    })
  })
  //I added cors to see if it would help solve the problem
app.use(cors())

home.js 文件使用 axios 从 firebase 调用数据。在这里

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import axios  from 'axios';


export class Home extends Component {
state = {
    screams: null
}
//loadad screa
componentDidMount() {
    axios.get('/screams')
    .then(res=> {
        console.log("res is", res)
this.setState({screams: res.data});
console.log(res)
    })
    .catch(err=>{
        console.log("error:", err.response)
    });
}
  render() {
      let screamMarkup = this.state.screams ? (
          this.state.screams.map(scream=>{
              return (
                  <p>{scream.body}</p>
              )
          })
      ) : <p>Loading ...</p>
    return (
      <Grid container spacing={10}>
        <Grid item sm={8} xs={12}>
       {screamMarkup}
      
        </Grid>
        <Grid item sm={4} xs={12}>
       <p>
       Profile ...
       </p>
      
        </Grid>
      </Grid>
    );
  }
}

export default Home;

我还在 package.js 上添加了代理作为我的 api 函数端点的字符串。 下面是我从控制台得到的 error.response 对象。

Answer 1

您已添加 app.use(cors()) 以允许跨域请求。您也需要为其提供参数。

另外，把它移到exports.api = functions.https.onRequest(app);上方

const cors = require('cors');

app.use(cors({ origin: true }));
...
exports.api = functions.https.onRequest(app);

您可以在 Firebase 文档here中阅读更多信息