ReactJS компонент, не загружающий мой размещенный API Heroku, будет загружать другие API

Question

У меня есть компонент, который вызывает API, который я развернул с помощью 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;

Он возвращает ответ json на вызов API внутри тега <div>. По какой-то причине он зависает, когда я вызываю свой API в Heroku, но работает, когда я вызываю все остальное (например, API Международной космической станции ).

Я часами устранял эту проблему и я в растерянности; Кто-нибудь знает, как получить данные из моего API?

Answer 1

Проблема вызвана server side.

Она была заблокирована политикой CORS : Нет 'Access-Control-Allow-Origin'.

Итак, вы должны включить CORS в своем API.

Answer 2

Проблема в вашем бэкэнд API. это бросает политику CORS. Вы должны занести белый домен в ваш бэкэнд в белый список.