Reactjs Axios（React）get请求从firebase返回403，但对postman有效

我正在开发一款社交媒体应用程序Classed，但我一直坚持将firebase云功能与CRA集成。我尝试在

package.json

中使用代理，但它给了我一个403错误

Firebase函数文件

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;

import React，{Component}来自'React'；
从“@material ui/core/Grid”导入网格；
从“axios”导入axios；
导出类Home扩展组件{
状态={
尖叫声：零
}
//负载面积
componentDidMount（）{
axios.get（“/尖叫声”）
。然后（res=>{
log（“res is”，res）
this.setState（{screams:res.data}）；
console.log（res）
})
.catch（错误=>{
日志（“错误：”，err.response）
});
}
render（）{
让尖叫标记=this.state.尖叫(
this.state.screams.map（scream=>{
返回(
{尖叫。身体}

)
})
)：正在加载

返回(
{markup}

轮廓

);
}
}
导出默认主页；

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

您已经添加了

应用程序。请使用（cors（））

来允许跨源请求。您还需要为它提供参数

另外，将其移到exports.api=functions.https.onRequest（app）上方

---

您可以在Firebase文档中阅读更多内容

这是我的package.json文件，我在其中添加了代理

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;

const cors = require('cors');

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