Unable to access API from React and Node through proxy

Unable to access API from React and Node through proxy

I'm having a problem with React and Node that I am unable to debug. I have an API connection to coinmarketcap on my node server, which returns a list of coins and individual coins. I am getting the correct data returned for all the coins endpoint and the individual coin endpoint on postman but I am only getting all the coins on react, while the single coins return a 404 error.<a href="https://i.stack.imgur.com/Zii54.png" target="_blank">Link to screenshot for API return of single coin on postman</a>

I'm having a problem with React and Node that I am unable to debug. I have an API connection to coinmarketcap on my node server, which returns a list of coins and individual coins. I am getting the correct data returned for all the coins endpoint and the individual coin endpoint on postman but I am only getting all the coins on react, while the single coins return a 404 error.Link to screenshot for API return of single coin on postman

Here is my server side code for returning a single coin:

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 =&gt; {
    res.send(response.data);
  });
} catch (err) {
  res.send("Sorry the currency you are looking for is not available");
  console.log(err);
}

});

};

Here is my React code to consume the 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
}) =&gt; {
  console.log(coin);
  this.setState({
    coin
  });
});

}

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

export default ViewCoin;

Here is my renderCoins function to get the data into a table. With a link to individual ones.

  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>
      );
    });
  }

I'm also using a proxy to route the backend and frontend ports:

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

I am able to access endpoints such as /api/coin/btc with no problem using the browser and postman. However, when using React I am getting a 404 error: GET http://localhost:3000/api/coin/BTC 404 (Not Found)

Am I missing something with the proxy or did I mess up my route? Any help is appreciated, not sure what am missing/not seeing.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Node.js CLI For Cryptocurrency Prices

In this project we will build a CLI (command line interface) for a cryptocurrency price app. We will use Commander.js, Inquirer, configstore and some other modules.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Develop this one fundamental skill if you want to become a successful developer

Throughout my career, a multitude of people have asked me&nbsp;<em>what does it take to become a successful developer?</em>