Блог

Главная - Вопросы по программированию - Множественный вызов API выборки возвращает ошибку 403 (второй вызов API не выполняется)

Множественный вызов API выборки возвращает ошибку 403 (второй вызов API не выполняется)

#javascript #html #css #reactjs #api

#javascript #HTML #css #reactjs #API

Вопрос:

Я пытаюсь выполнить несколько вызовов API выборки для проекта API League of Legends, над которым я работаю. Причина, по которой я должен выполнить несколько вызовов API, заключается в том, чтобы сначала получить идентификатор учетной записи пользователя. когда я получаю идентификатор учетной записи с первым вызовом API, мне нужно выполнить второй вызов API с идентификатором учетной записи, чтобы получить статистику истории матчей игрока, это можно сделать со вторым вызовом API. В целом, я пытаюсь получить историю матчей игроков, чтобы я мог поместить ее в графическую диаграмму, чтобы показать «Самых популярных чемпионов» пользователя, однако второй вызов API не может быть запущен, и код возвращает ошибку 403.

ОШИБКА
введите описание изображения здесь

 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 = () => {
    const proxyurl = "https://mysterious-wave-96239.herokuapp.com/";
    const url = "https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/"   this.props.username   "?api_key="  process.env.REACT_APP_SECRET_KEY;
    fetch(proxyurl   url)
    .then(res => res.json())
    .then(
        (result) => {
            this.setState({
                isLoaded: true,
                stats: result,
                accountId: result.accountId
            }
            ,console.log(`this is the users account id = `   result.accountId));
        },
        (error) => {
            this.setState({
                isLoaded: true,
          error: {
              message: "Error - Something went wrong!"
            }
        });
    }
    )
}




render () {
    return (
        <div className="chart">
        <ChartData accountId={this.state.accountId} />
        </div>
    )
   }
}
export default Chart
  
     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 = "https://mysterious-wave-96239.herokuapp.com/";
        const url = "https://na1.api.riotgames.com/lol/match/v4/matchlists/by-account/"   this.props.accountId   "?endIndex=20amp;api_key="  process.env.REACT_APP_SECRET_KEY;
        fetch(proxyurl   url)
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    isLoaded: true,
                    matchHistory: result
                }
                ,console.log(result)
                );
            },
            (error) => {
                this.setState({
                    isLoaded: true,
              error: {
                  message: "Error - Something went wrong!"
                }
            });
        }
        )
    }


    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 (
            <div className="chart">
                <Bar
                    data={this.state.chartData}
                    options={{
                        scales: {
                            yAxes: [{
                              ticks: {
                                beginAtZero: true
                              }
                            }]
                          },
                        title: {
                        display: this.props.displayTitle,
                        text: "Most played champions in 20 games",
                        fontSize: 25
                    },
                    legend: {
                    display: this.props.displayLegend,
                    position: this.props.legendPosition
                    }
                }}
                />
            </div>
        )
         }
      }
           export default ChartData```

Комментарии:

1. вы проверяете подлинность своего запроса?

2. @DanielA. Белый можете ли вы уточнить, что вы подразумеваете под аутентификацией моего запроса?

3. Почему вы объединяете proxyUrl с url ? Вы получаете «запрещено», так что, может быть, ваш параметр api неправильно urlencoded?

4. @Icepickle Я должен объединить URL прокси, иначе я получаю эту ошибку CORS — доступ к выборке в ‘ na1.api.riotgames.com/lol/match/v4/matchlists/by-account /… ‘ from origin ‘ localhost: 3000 ‘ был заблокирован политикой CORS: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе. Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса на ‘no-cors’, чтобы получить ресурс с отключенным CORS.

Ответ №1:

это было решено с использованием метода жизненного цикла componentDidMount() вместо component, наряду с вводом операторов if else для перехвата ошибок для повторного отображения

 import ChartData from './ChartData'

class Chart extends Component {
    constructor(props) {
        super(props)
        this.state = {
            error: null,
            isLoaded: false,
            stats: [],
            matchHistory: null,
            chartData: {},
            accountId: ''
        }
    }

    

    componentDidMount = () => {
        const proxyurl = "https://mysterious-wave-96239.herokuapp.com/";
        const url = "https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/"   this.props.username   "?api_key="  process.env.REACT_APP_SECRET_KEY;
        fetch(proxyurl   url)
        .then(res => res.json())
        .then(
            (result) => {
                this.setState({
                    isLoaded: true,
                    stats: result,
                    accountId: result.accountId
                }
                ,console.log(`this is the users account id = `   result.accountId));
            },
            (error) => {
                this.setState({
                    isLoaded: true,
              error: {
                  message: "Error - Something went wrong!"
                }
            });
        }
        )
    }

    

    
    render () {
    const { error, isLoaded } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else if(isLoaded) {
        return (
            <div className="chart">
            <ChartData accountId={this.state.accountId} />
            </div>
        )
        }
    }
}
export default Chart```