React / Ax ios: получить данные API с ключом для coinmarketcap

Question

нет опыта программирования здесь ... Я читал некоторые вопросы по этому поводу, но не смог понять это правильно. Я использую React для небольшого приложения и хотел бы получить данные из API, в данном случае Coinmarketcap, но для этого требуется ключ, и я не знаю, как передать его через ax ios. Сделал тестовый запрос с помощью Postman, и он работает нормально.

Вот как API должен получать запрос (Node.js пример):

const rp = require('request-promise');
const requestOptions = {
  method: 'GET',
  uri: 'https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest',
  qs: {
    'start': '1',
    'limit': '5000',
    'convert': 'USD'
  },
  headers: {
    'X-CMC_PRO_API_KEY': 'b54bcf4d-1bca-4e8e-9a24-22ff2c3d462c'
  },
  json: true,
  gzip: true
};

rp(requestOptions).then(response => {
  console.log('API call response:', response);
}).catch((err) => {
  console.log('API call error:', err.message);
});

И это код моего файла React:

import React, { Component } from 'react'
import axios from 'axios'

class Prices extends Component {

    state = {
        cryptos: []
    }

    componenDidMount() {

        axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest', {
            headers: { 'X-CMC_PRO_API_KEY': 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee' }
        })
        .then(res => {
            console.log(res)
            this.setState({
                cryptos: res.data.slice(0,50)
            })
        });
    }
    render() {
        return(
            <div>asdf</div>
        )
    }
}

export default Prices

Очевидно, я скрываю там свой ключ.

1. Приложение работает нормально
2. Нет явных ошибок, но также ...
3. Нет входа в консоль

Вопрос не в том, что я делаю что-то не так, а в том, что ...

Я хотел бы заранее поблагодарить вас за помощь.

Редактировать: Код родительского файла

import Layout from '../components/Layout'
import Prices from '../components/prices'
import axios from 'axios'

const Index = (props) => (
    <Layout>
        <div className="container">
            <h1>Welcome to CoinInfo</h1>
            <p>Check current Bitcoin rates</p>
            <Prices />
        </div>
    </Layout>
)

export default Index

Answer 1

Согласно документации CoinMarketCap

Выполнение HTTP-запросов на стороне клиента с Javascript в настоящее время запрещено через настройку CORS. Это необходимо для защиты вашего ключа API, который не должен быть виден пользователям вашего приложения, чтобы ваш ключ API не был украден. Защитите свой ключ API, перенаправляя вызовы через собственную серверную службу.

Это означает, что они не хотят, чтобы вы делали прямые вызовы API из браузера или клиента. Вместо этого они говорят вам вызвать бэкэнд-сервис, который сопоставляет ваш идентификатор пользователя с ключом и выполняет промежуточный вызов на веб-сайт coinMarketCap

Например, вы можете предоставить API на сервере узлов, который вы вызываете из клиента и в этом вызове API сервер узла вызовет API coinMarketBase и вернет вам результат

Answer 2

В вашем запросе отсутствует параметр query string, а также имеется опечатка. Это componentDidMount, t отсутствует в компоненте.

Пожалуйста, попробуйте следующий код.

import React, { Component } from 'react'
import axios from 'axios'
class Prices extends Component {
    state = {
        cryptos: []
    }

    componentDidMount() {
       this.fetchData();
    }

    async fetchData() {
        let qs = `?start=1&limit=5000&convert=USD`
        try {
            let res = await axios.get('https://pro-api.coinmarketcap.com/v1/cryptocurrency/listings/latest' + qs, {
                headers: { 'X-CMC_PRO_API_KEY': 'aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeee' }
            });
            console.log(res)
            this.setState({
                cryptos: res.data.slice(0, 50)
            });
        } catch (error) {
            console.log(error);
        }

    }
    render() {
        return (
            <div>asdf</div>
        )
    }
}
export default Prices