Question

我在Heroku托管的react应用中有一个简单的API请求。
本地（localhost：3000），该请求通过在我的package.json上配置的代理工作，但是当我在Heroku上部署该应用程序后，该请求不再起作用。该请求返回错误：TypeError: "t.data.facts is undefined"

api响应为：{"facts":["A dog’s pregnancy lasts for approximately 60 days."],"success":true}

我的应用程序代码：

 class App extends Component {

 constructor(props){
    super(props);
    this.state = {
            dogImage:"",
            dogFact:"",
            isFactLoading: true,
            isImageLoading: true
          }
      }

  componentDidMount(){
        this.getDogImage();
        this.getDogFact();
     }



getDogFact = () =>{
axios.get("/facts")
  .then(res =>{
    this.setState({dogFact:res.data.facts[0]})
    this.setState({isFactLoading:false})
  })
   .catch(err =>{
   console.log(err)
  })
}

渲染方法：

render() {
const { dogImage } = this.state;
const { dogFact } = this.state;
const { isImageLoading } = this.state;
const { isFactLoading } = this.state;

return (
  <div className="App">
        <code>{ isImageLoading ? "loading..." :<img src={ dogImage } alt="random dog image"></img> }</code>
        <code>{ isFactLoading ? "loading..." : <p> { dogFact } </p> } </code>
  </div>
);
}

我的包裹json代码：

  "proxy": "https://dog-api.kinduff.com/api/",

由于跨域问题，我设置了代理，但这仅适用于我的本地环境，而不适用于Heroku。

有人知道那是什么吗？

通过Heroku应用程序上的代理调用外部API

0 个答案: