CODEWITHSUNDEEP
reactjsherokufetch
4Dw5ygY73
4Dw5ygY73

Reputation: 3

ReactJS component not fetching my Heroku hosted API, will fetch other APIs

I have a component which calls an API I've deployed with Heroku:

import React from 'react';

class ApiCaller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      load: '',
    };
  }
  componentDidMount(){
    fetch('https://skincierge-data-api-1.herokuapp.com/api/v1/query/?SKIN_TYPE=oily&ANTI_AGEING=True&PRIMARY_CONCERN=wrinkles&BUNDLE_PRICE_LIMIT=350&SECONDARY_CONCERN=spots')
    .then(res => res.json())
    .then((data) => {
        this.setState({load: JSON.stringify(data)})
    })
    .catch(console.log)
  }

    render(){
        return(
        <div>
            {this.state.load}
        </div>
    )
    };
}

export default ApiCaller;

It returns the response json of the API call inside a <div> tag. For some reason, it hangs when I call my API in Heroku, but works when I call everything else (e.g. the International Space Station API).

I've been troubleshooting this for hours and am at a loss; does anybody know how to fetch the data from my API?

Upvotes: 0

Views: 76

Answers (2)

Refael
Refael

Reputation: 238

The problem is caused by server side.

It has been blocked by CORS policy: No 'Access-Control-Allow-Origin'.

So, You have to Enable CORS in your API.

Upvotes: 1

Frustrated Programmer
Frustrated Programmer

Reputation: 341

The problem is within your backend api. it throws a CORS policy. You should whitelist your front-end domain in your backend.

Upvotes: 0

Related Questions