title: Multiple Fetch API Call returns error 403 (the second API call is not ran)
body: <p>I am trying to do multiple API fetch calls for a League of Legends API project I am working on. The reason why I must do multiple API calls is to first get the user's accountId. when I get the account ID with the first API call I need to make a second API call with the accountId in order to get the player's match history stats, this can be done with the second api call. Overall I am trying to get the players match history so I can put it into a graph chart to show the user's &quot;Most played champions&quot; However, the second API call cannot be ran and the code is returning error 403.</p>
  <p><strong>ERROR</strong>
  <a href="https://i.stack.imgur.com/AdCGK.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AdCGK.jpg" alt="enter image description here" /></a></p>
  <pre><code>import React, {Component} from 'react'
  import ChartData from './ChartData'
  
  class Chart extends Component {
  constructor(props) {
      super(props)
      this.state = {
          error: null,
          isLoaded: false,
          stats: [],
          matchHistory: null,
          chartData: {},
          accountId: ''
      }
  }
  
  componentDidMount() {
      this.getUserInfo();
  }
  
  getUserInfo = () =&gt; {
      const proxyurl = &quot;https://mysterious-wave-96239.herokuapp.com/&quot;;
      const url = &quot;https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/&quot; + this.props.username + &quot;?api_key=&quot; +process.env.REACT_APP_SECRET_KEY;
      fetch(proxyurl + url)
      .then(res =&gt; res.json())
      .then(
          (result) =&gt; {
              this.setState({
                  isLoaded: true,
                  stats: result,
                  accountId: result.accountId
              }
              ,console.log(`this is the users account id = ` + result.accountId));
          },
          (error) =&gt; {
              this.setState({
                  isLoaded: true,
            error: {
                message: &quot;Error - Something went wrong!&quot;
              }
          });
      }
      )
  }
  
  
  
  
  render () {
      return (
          &lt;div className=&quot;chart&quot;&gt;
          &lt;ChartData accountId={this.state.accountId} /&gt;
          &lt;/div&gt;
      )
     }
  }
  export default Chart
  </code></pre>
  <pre><code>    import {Bar
      // ,Line
      // ,Pie
      } from 'react-chartjs-2'
  
      class ChartData extends Component {
      constructor(props) {
          super(props)
          this.state = {
              error: null,
              isLoaded: false,
              stats: [],
              matchHistory: null,
              chartData: {}
          }
      }
  
      componentDidMount() {
          this.getMatchHistory();
          this.getChartData();
      }
  
       getMatchHistory () {
          const proxyurl = &quot;https://mysterious-wave-96239.herokuapp.com/&quot;;
          const url = &quot;https://na1.api.riotgames.com/lol/match/v4/matchlists/by-account/&quot; + this.props.accountId + &quot;?endIndex=20&amp;api_key=&quot; +process.env.REACT_APP_SECRET_KEY;
          fetch(proxyurl + url)
          .then(res =&gt; res.json())
          .then(
              (result) =&gt; {
                  this.setState({
                      isLoaded: true,
                      matchHistory: result
                  }
                  ,console.log(result)
                  );
              },
              (error) =&gt; {
                  this.setState({
                      isLoaded: true,
                error: {
                    message: &quot;Error - Something went wrong!&quot;
                  }
              });
          }
          )
      }
  
  
      getChartData(){
          this.setState({
            chartData:{
              labels: ['Zed', 'Akali', 'Nunu', 'Luxe', 'Amumu', 'Fiona', 'Yassuo'],
              datasets:[
                {
                  label:'Population',
                  data:[
                      8,
                      2,
                      4,
                      4,
                      1,
                      1,
                      3
                  ],
                  backgroundColor:[
                    'rgba(255, 99, 132, 0.6)',
                    'rgba(54, 162, 235, 0.6)',
                    'rgba(255, 206, 86, 0.6)',
                    'rgba(75, 192, 192, 0.6)',
                    'rgba(153, 102, 255, 0.6)',
                    'rgba(255, 159, 64, 0.6)',
                    'rgba(255, 99, 132, 0.6)'
                  ]
                }
              ]
            }
          });
        }
  
      static defaultProps = {
          displayTitle: true,
          displayLegends: true,
          legendPosition: 'right'
      }
      
      render () {
          return (
              &lt;div className=&quot;chart&quot;&gt;
                  &lt;Bar
                      data={this.state.chartData}
                      options={{
                          scales: {
                              yAxes: [{
                                ticks: {
                                  beginAtZero: true
                                }
                              }]
                            },
                          title: {
                          display: this.props.displayTitle,
                          text: &quot;Most played champions in 20 games&quot;,
                          fontSize: 25
                      },
                      legend: {
                      display: this.props.displayLegend,
                      position: this.props.legendPosition
                      }
                  }}
                  /&gt;
              &lt;/div&gt;
          )
           }
        }
             export default ChartData```
  </code></pre>