Axios (React) get 請求從 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 從home.js調用數據。 這里是

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 文檔中的更多信息