Axios (React) get 请求从 firebase 返回 403，但适用于邮递员

Question

I am working on a social media app following Classed, but I got stuck on integrating the firebase cloud functions with CRA. I tried using the proxy thing in package.json , but it gives me a 403 error.

Firebase functions file

//?===================?
//?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())

The home.js file calls for data from firebase using axios. Here it is

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;

I also have proxy added on package.js as a string to the endpoint of my api function. Below is the error.response object I get from the console.

Answer 1

You've added app.use(cors()) to allow cross-origin requests. You need to provide the parameter for it too.

Also, move it above exports.api = functions.https.onRequest(app);

const cors = require('cors');

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

You can read more in Firebase documentation here