I'm trying to make a put request to a Spotify Web API endpoint using Angular's HttpClient but the request is failing and I'm not sure why. Take a look at the following code:
let headers = new HttpHeaders().set('Authorization', 'Bearer ' + this.accessToken);
const endpoint1 = 'https://api.spotify.com/v1/me/player/currently-playing';
this.httpClient.get(endpoint1, { headers: headers }).subscribe((data: Object) => {
console.log(data);
});
const endpoint2 = 'https://api.spotify.com/v1/me/player/play';
this.httpClient.put(endpoint2, { headers: headers }).subscribe((data: Object) => {
console.log(data);
});
The get request works just fine, the Authorization header is set in the request and it works as expected. The put request however does not work. In the response, I get an error message that says "No token provided". Furthermore, in the Chrome developer tools, the network tabs shows the get request with the Authorization header but the put request has no Authorization header.
I'm not sure what's different between the two requests that would cause an error on the second, both endpoints only require the Authorization header and I've made sure the access token has been given with the proper scopes required to access these endpoints.
player/play requires the "user-modify-playback-state" scope and player/currently-playing requires the "user-read-currently-playing" and/or "user-read-playback-state", I've included all three.
The two endpoints can be found here:
https://developer.spotify.com/documentation/web-api/reference/player/start-a-users-playback/
Why is the put request failing and how can I fix it?