Announcements

401 error on all PUT requests

Solved!

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))
      }

 

Reply

Accepted Solutions
Marked as solution

31jjmqgwdyp6sg2bjgt2

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.

View solution in original post

4 Replies

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.
 
Marked as solution

31jjmqgwdyp6sg2bjgt2

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.

Suggested posts

Env: prod