On fetch call getting PUT https://api.spotify.com/v1/me/player 502

[bungee_gum]

The console.log(response) object says the status code is 202 in my developer console (google chrome).

But then it gives me 502 bad gateway for the PUT request. 

    useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://sdk.scdn.co/spotify-player.js";
        script.async = true;

        document.body.appendChild(script);

        window.onSpotifyWebPlaybackSDKReady = () => {
            const player = new window.Spotify.Player({
                name: "Web Playback SDK",
                getOAuthToken: (callback) => {
                    callback(props.token);
                },
                volume: 0.5,
            });

            setPlayer(player);

            player.addListener("ready", ({ device_id }) => {
                console.log("Ready with Device ID", device_id);

                async function connect_to_device() {
                    await fetch('https://api.spotify.com/v1/me/player', {
                        method: "PUT",
                        headers: ({
                            'Content-type': 'application/json',
                            'Authorization': `Bearer ${props.token}`
                        }),
                        body: JSON.stringify({
                            device_ids: [device_id],
                            play: false,
                        })
                    }).then((response) => {
                        console.log(response)});
                }
                connect_to_device();
                
            });

[Ximzend]

Error 502 could mean that the server is (temporarily) overloaded, so I recommend you to try it again at a later moment.