401 error on all PUT requests

[31jjmqgwdyp6sg2bjgt2]

Plan

Premium

Country

Australia

Device

Desktop, Windows 10, Chrome

My Question or Issue

Hi, I'm making a react web app using Axios for fetch requests. My app already correctly sets a token and receives data from API endpoints such as 'https://api.spotify.com/v1/me/playlists'. All endpoints are working except PUT request endpoints. HOWEVER, if I use the developer console for PUT requests, they will work correctly, even using the token I get from my app. 

The error: status: 401, message: "No token provided"

Example code request:

const reorderPlaylist = async () => {

        await axios.put(`https://api.spotify.com/v1/playlists/${playlistData.playlist_id}/tracks`, {

          headers: {

            Accept: 'application/json',

            Authorization: `Bearer ${token}`,

            'Content-Type': 'application/json',

          },

          data: {

            "range_start": 1,

            "insert_before": 3,

            "range_length": 2

          }

        }).then((res) => {

          console.log(res.data)

        }).catch(error => console.error(error))

      }

[31jjmqgwdyp6sg2bjgt2]

Forgot to mention i have my scopes set up correctly:

user-read-private%20user-read-recently-played%20user-read-email%20user-read-playback-state%20user-modify-playback-state%20playlist-modify-private%20playlist-modify-public%20playlist-read-private%20streaming

[ffkangoroo]

There was once a weird issue we had with PUT Requests as they were blocked by the company Firewall. 

Otherwise please provide the whole snippet with the token generation etc, maybe you have some quirks with your PUT endpoints you are not seeing eg. moved out of scope. 

[alvaron]

Hey, I think the problem is that you are sending the headers as body data. To solve this, you need to pass the headers as follows:

const reorderPlaylist = async () => {

       await axios.put(`https://api.spotify.com/v1/playlists/${playlistData.playlist_id}/tracks`, {

              "range_start": 1,

              "insert_before": 3,

              "range_length": 2

          },
          {

            headers: {

              Accept: 'application/json',

              Authorization: `Bearer ${token}`,

              'Content-Type': 'application/json',

           },

        }).then((res) => {

          console.log(res.data)

        }).catch(error => console.error(error))

      }

Note that the second object is used to send data (range_start, insert_before, etc.) and the third one is the configuration object containing the headers.

[31jjmqgwdyp6sg2bjgt2 · Accepted solution]

Hey thanks for the replies, i finally found a solution online. (alvaron, your solution had the same issue 'no token provided')

The problem is with Axios requests, for whatever reason the headers are not being sent in put/post requests but does with get, unless you structure the request differently.

To fix the issue I had to change how the request was written for put/post requests, see below: 

await axios({

      method: 'put',

      url: `https://api.spotify.com/v1/playlists/${playlistID}/tracks`,

      headers: { 'Authorization': 'Bearer ' + token },

      data: {

        "range_start": 1, // first item to change

        "insert_before": 3, // location to insert item

        "range_length": 1 // number of items to change

      }

    })

Hopefully this helps anyone with the same issue.

[ariost11]

This just saved my life- was searching for this error for like 10 hours. This is so dumb but thanks sm for the fix!