admin 管理员组

文章数量: 1086019

I'm trying to follow a tutorial on Youtube to get used to Spotify API, but I keep on getting the same error despite having checked the documents if I made a typo. I pared my code to the one that's being shared in the video and they look exactly them same, but I keep on getting this error:

{
 "error": {
 "status": 401,
 "message": "No token provided"
 }
}

For reference, my js is here

const app = {};
app.apiUrl = '';

//Allow user to enter some names
app.events = function() {
    $('form').on('submit', function(e){
        e.preventDefault();
        let artists = $('input[type=search]').val();
        artists = artists.split(',');
        let search = artists.map(artistName => app.searchArtist(artistName));

        $.when(...search)
            .then((...results) => {
                console.log(results);
            });
    });
};

//Go to spotify to get the artist name
app.searchArtist = (artistName) => $.ajax({
    url: `${app.apiUrl}/search`,
    method:'GET',
    dataType: 'json',
    data: {
        q: artistName,
        type: 'artist'
    }
});

//Using the IDs, get the albums

//Get tracks

//Build playlist

app.init = function() {
    app.events();
};

$(app.init);

I am aware that the video was posted 4 years ago, but I have also checked the endpoint's documentation and there seems to be no change since 4 years ago.

Further reference, my HTML code:

<body>
    <main class="main-container">
        <section>
            <div class="form">
                <img src="images/note.svg" alt="">
                <form action="">
                    <input type="search" value="muse,ghost">
                    <input type="submit" value="Create">
                </form>
                <p>Icon created by unlimicon from the Noun Project</p>
            </div>
            <div class="playlist">
                <div class="loader">
                    <div class="inner-circle"></div>
                </div>
            </div>
        </section>
    </main>
    <script src=".1.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

I'm trying to follow a tutorial on Youtube to get used to Spotify API, but I keep on getting the same error despite having checked the documents if I made a typo. I pared my code to the one that's being shared in the video and they look exactly them same, but I keep on getting this error:

{
 "error": {
 "status": 401,
 "message": "No token provided"
 }
}

For reference, my js is here

const app = {};
app.apiUrl = 'https://api.spotify./v1';

//Allow user to enter some names
app.events = function() {
    $('form').on('submit', function(e){
        e.preventDefault();
        let artists = $('input[type=search]').val();
        artists = artists.split(',');
        let search = artists.map(artistName => app.searchArtist(artistName));

        $.when(...search)
            .then((...results) => {
                console.log(results);
            });
    });
};

//Go to spotify to get the artist name
app.searchArtist = (artistName) => $.ajax({
    url: `${app.apiUrl}/search`,
    method:'GET',
    dataType: 'json',
    data: {
        q: artistName,
        type: 'artist'
    }
});

//Using the IDs, get the albums

//Get tracks

//Build playlist

app.init = function() {
    app.events();
};

$(app.init);

I am aware that the video was posted 4 years ago, but I have also checked the endpoint's documentation and there seems to be no change since 4 years ago.

Further reference, my HTML code:

<body>
    <main class="main-container">
        <section>
            <div class="form">
                <img src="images/note.svg" alt="">
                <form action="">
                    <input type="search" value="muse,ghost">
                    <input type="submit" value="Create">
                </form>
                <p>Icon created by unlimicon from the Noun Project</p>
            </div>
            <div class="playlist">
                <div class="loader">
                    <div class="inner-circle"></div>
                </div>
            </div>
        </section>
    </main>
    <script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>
Share Improve this question edited Dec 5, 2020 at 4:40 Aisyah asked Dec 5, 2020 at 3:48 AisyahAisyah 511 gold badge1 silver badge6 bronze badges 2
  • "All requests to Web API require authentication. This is achieved by sending a valid OAuth access token in the request header. For more information about these authentication methods, see the Web API Authorization Guide." developer.spotify./documentation/web-api – tgdavies Commented Dec 5, 2020 at 3:58
  • 1 The very first thing that endpoint documentation mentions is an Authorisation header. – tgdavies Commented Dec 5, 2020 at 3:59
Add a ment  | 

3 Answers 3

Reset to default 2

Go to https://developer.spotify./console/get-search-item/ to generate a OAuth Token and use the same token in your API call as Authorization Bearer token.

Are you already define a spotify access token ?

https://developer.spotify./

app.searchArtist = (artistName) => $.ajax({
    url: `${app.apiUrl}/search`,
    method:'GET',
    dataType: 'json',
    data: {
        q: artistName,
        type: 'artist'
    },
    headers: {
      "Authorization": `Bearer ${yourToken}`
    }
});

It looks like you are missing your API key or not passing it properly.

本文标签: javascriptSpotify API Error 401 quotno token providedquotStack Overflow