Question

我正在使用Javascript开发一个项目，其中包括一个Spotify播放器。除了歌曲会不时停止播放约5秒钟的事实外，其他一切都运行良好。当我观看控制台时，出现以下错误消息：

UINavigationController

通过在网上查看，我发现Spotify不允许与Ajax连接（获取令牌），并且我通过使用后端获取令牌摆脱了这个问题。我正在使用他们的快速入门教程：https://developer.spotify.com/documentation/web-playback-sdk/quick-start/ 我手动执行的唯一请求是从后端获取信息。

Blocage d’une requête multiorigines (Cross-Origin Request) : la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://audio-ak-spotify-com.akamaized.net/audio/78ba3ab093dbe2d394531690938ad31baabf72cb?__token__=exp=1558443850~hmac=4db742e9992ad26844a6a5ae2d0c1ed4f88e1ef008e3d0252413addf54b8d804. Raison : échec de la requête CORS.

据我了解，CORS错误是服务器端错误，但是由于我对Spotify API后端无能为力，因此我必须在前端找到解决方案。我肯定有些不明白的地方。感谢您的宝贵帮助

编辑：这是我用来请求后端的函数getAjax和postAjax

//Progress bar default information

let position = 0;
let duration = 0;
let paused = false;
let $element = $('#myProgress');

//Function to update the song progress bar state
function progress() {

    var progressBarWidth = position * $element.width() / duration;

    $element.find('div').animate({ width: progressBarWidth }, 500);
};

//Adding an interval of 500ms to update the progressbar data
setInterval(function(){
    if (position < duration && !paused){
        progress();
        position = position + 0.5;
    }
}, 500);

//Getting playlist next songs every 30 seconds

setInterval(function(){
    getAjax("/party/s/{{party_slug}}/upcoming/" ,function(data){
        dt.load(JSON.parse(data));
        console.log(data);
    })
}, 30000);

const iframe = document.querySelector('iframe[src="https://sdk.scdn.co/embedded/index.html"]');

window.onSpotifyWebPlaybackSDKReady = () => {
    const token = '{{access_token}}';

    const player = new Spotify.Player({
        name: '{{party_name}}',
        getOAuthToken: cb => { cb(token); }
    });


    // Error handling
    player.addListener('initialization_error', ({ message }) => { console.log(message); });
    player.addListener('authentication_error', ({ message }) => { console.log(message); });
    player.addListener('account_error', ({ message }) => { console.log(message); });
    player.addListener('playback_error', ({ message }) => { console.log(message); });

    // Playback status updates
    player.addListener('player_state_changed', state => {

        //Updating graphical elements
        //Showing album cover
        document.getElementById("album_cover").src = state['track_window']['current_track']['album']['images'][0]['url'];
        //Displaying song title
        document.getElementById("song_title").innerHTML = state['track_window']['current_track']['name'];

        var artists = '';

        for (var i = state['track_window']['current_track']['artists'].length - 1; i >= 0; i--) {
            artists = artists + ' ' + state['track_window']['current_track']['artists'][i]['name'];
            if (i > 0){
                artists = artists + ',';
            }
        }
        //Displaying artists
        document.getElementById("song_artists").innerHTML = artists;

        //Calculating the progressbar data
        paused   = state['paused'];
        position = 0;
        duration = 0;

        if (state['position'] != 0) {
            position = Math.floor(state['position'] / 1000);
        }

        if (state['duration'] != 0) {
            duration = Math.floor(state['duration'] / 1000);
        }

        //Updating the track state to the backend
        postAjax("/party/s/{{party_slug}}/update/", { 'current' : state['track_window']['current_track']['id'] },
            function(data){ 
        });

        console.log(state);
    });


    // Ready
    player.addListener('ready', ({ device_id }) => {

        //adding the support of Chrome

        if (iframe) {
            iframe.style.display = 'block';
            iframe.style.position = 'absolute';
            iframe.style.top = '-1000px';
            iframe.style.left = '-1000px';
        }

        //Informing the backend of the device_id
        postAjax('{{callback}}', { 'player_id' : device_id }, function(data){ 
            console.log(data); 
        });

        console.log('Ready with Device ID', device_id);
    });

    // Not Ready
    player.addListener('not_ready', ({ device_id }) => {
        console.log('Device ID has gone offline', device_id);
    });

    // Connect to the player!
    player.connect();

};

CORS请求停止在Spotify Javascript中播放音乐

0 个答案: