Невозможно получить доступ к API из React и Node через прокси - PullRequest
Новая
       6

Невозможно получить доступ к API из React и Node через прокси

0 голосов
/ 17 ноября 2018

У меня проблема с React и Node, которую я не могу отладить. У меня есть соединение API с coinmarketcap на моем сервере узлов, который возвращает список монет и отдельных монет. Я получаю правильные данные, возвращаемые для всех конечных точек монет и отдельных конечных точек монет почтальона, но я получаю только все реагирующие монеты, в то время как отдельные монеты возвращают ошибку 404. Ссылка на скриншот для возврата API одного монета на почтальона

Вот мой серверный код для возврата одной монеты: 

module.exports = app => {

  app.get("/api/coin/:id", async(req, res) => {
    const symbolID = req.params.id;
    const requestOptions = {
      method: "GET",
      uri: "https://sandbox-api.coinmarketcap.com/v1/cryptocurrency/info",
      qs: {
        symbol: symbolID.toUpperCase()
      },
      headers: {
        "X-CMC_PRO_API_KEY": keys.testCoinAPI
      },
      json: true,
      gzip: true
    };

    try {
      await rp(requestOptions).then(response => {
        res.send(response.data);
      });
    } catch (err) {
      res.send("Sorry the currency you are looking for is not available");
      console.log(err);
    }
  });

};

Вот мой код React для использования API 

import React, {
  Component
} from "react";
import axios from "axios";

class ViewCoin extends Component {
  componentDidMount() {
    const {
      match: {
        params
      }
    } = this.props;

    axios.get(`/api/coin/${params.symbol}`).then(({
      data: coin
    }) => {
      console.log(coin);
      this.setState({
        coin
      });
    });
  }

  render() {
    return <h1 > This is the view coin component < /h1>;
  }
}

export default ViewCoin;

Вот моя функция renderCoins для получения данных в таблицу. Со ссылкой на отдельные. 

  renderCoins() {
    return this.props.coins.map(coin => {
      return (
        <tr key={coin.id}>
          <td>
            <Link to={`/coin/view/${coin.symbol}`}>{coin.name}</Link>
          </td>
          <td>{coin.symbol}</td>
          <td>${coin.quote.USD.price}</td>
          <td>${coin.quote.USD.market_cap}</td>
          <td>{coin.circulating_supply}</td>
          <td>${coin.quote.USD.volume_24h}</td>
          <td>{coin.quote.USD.percent_change_24h}%</td>
        </tr>
      );
    });
  }

Я также использую прокси для маршрутизации внутренних и внешних портов: 

 app.use(proxy("/api/*", { target: "http://localhost:5000" }));

Я могу без проблем обращаться к конечным точкам, таким как / api / coin / btc, используя браузер и почтальон. Однако при использовании React я получаю ошибку 404: ПОЛУЧИТЬ http://localhost:3000/api/coin/BTC 404 (не найдено)

Я что-то упустил с прокси или я испортил свой маршрут? Любая помощь приветствуется, не знаю, чего не хватает / не вижу.

1 Ответ

0 голосов
/ 20 ноября 2018

Я смог решить проблему.Это была проблема с прокси:

Мне пришлось включить: app.use (proxy ("/ api / **", {target: "http://localhost:5000"})); в моем проксиопределение.

...