Невозможно подключиться к Spotify Api: ошибка недопустимого ответа URI

Я использую следующие два прикрепленных файла.

index2.html файл, расположенный на локальном сервере, который вызывает файл JavaScript, который также находится на локальном компьютере.

fetch-ajax3.js - файл JavaScript, расположенный на локальном сервере, состоящий из функции и метода для аутентификации и авторизации вызова API, получения данных и их публикации в консоли.

Я не уверен, что вводить в URI перенаправления. Кто-нибудь может помочь?

Решение - мне удалось решить проблему после внесения в белый список uri обратного вызова в приложении spotify api.

const hash = window.location.hash
.substring(1)
.split('&')
.reduce(function (initial, item) {
  if (item) {
    var parts = item.split('=');
    initial[parts[0]] = decodeURIComponent(parts[1]);
  }
  return initial;
}, {});
window.location.hash = '';

// Set token
let _token = hash.access_token;

const authEndpoint = 'https://accounts.spotify.com/authorize';

// Replace with your app's client ID, redirect URI and desired scopes
const clientId = '';
const redirectUri = '';
const scopes = [
  'user-top-read'
];

// If there is no token, redirect to Spotify authorization
if (!_token) {
  window.location = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join('%20')}&response_type=token&show_dialog=true`;
}

// Make a call using the token
$.ajax({
   url: "https://api.spotify.com/v1/me/top/artists",
   type: "GET",
   beforeSend: function(xhr){xhr.setRequestHeader('Authorization', 'Bearer ' + _token );},
   success: function(data) {
     // Do something with the returned data
     data.items.map(function(artist) {
       let item = $('<li>' + artist.name + '</li>');
       item.appendTo($('#top-artists'));
     });
   }
});

    <html>
      <head>
        <title>Spotify Implicit Grant Template</title>
        <meta charset = "utf-8">
        <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <link href = "https://sp-bootstrap.global.ssl.fastly.net/8.0.0/sp-bootstrap.min.css" rel = "stylesheet" />
        <script
          src = "https://code.jquery.com/jquery-3.2.1.min.js"
          integrity = "sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4 = "
          crossorigin = "anonymous"></script>
        <script src = "./fetch-ajax3.js" defer></script>
      </head>
      <body class = "container">
        <h1 class = "text-salmon">Spotify Implicit Grant Template</h1>
        <h3>This app uses the implicit grant authorization flow to authenticate users and get user data.</h3>
        <p>
          Here are your top artists on Spotify:
          <ol id = "top-artists"></ol>
      </body>
    </html>

Вы отлаживали свой собственный код или проводили какие-либо исследования? Если да, вы должны поделиться этим в вопросе с редактировать. Помните, что SE - ужасный отладчик.

— 29.10.2018 19:20

javascript ajax rest api spotify

29.10.2018 17:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

170