客户端与服务器端实例中的 Spotify Iframe 问题答案

【问题标题】：Issue with Spotify Iframes in client vs server side instances客户端与服务器端实例中的 Spotify Iframe 问题
【发布时间】：2023-01-20 05:23:03
【问题描述】：

我在 Spotify Iframes 以预览模式显示曲目时遇到问题。根据 Spotify 在 Iframe 中的完整曲目播放，

我们直接在 Spotify 播放按钮中引入了完整播放功能。它适用于大多数主流浏览器，包括 Chrome、Firefox、Opera 和 Microsoft Edge。用户还必须在其 Web 浏览器中登录到 spotify.com，并且您的 HTML 必须包含 allow="encrypted-media" 属性。

使用下面的 iframe 脚本（在每个 Spotify 曲目中提供）或简单地使用 accessing the embed URL，当我登录到基于 Web 的 Spotify 帐户时，我可以在浏览器中访问完整曲目。但是，当部署到服务器 (such as an EC2 instance) 时，我仍然处于预览模式，同时仍登录到我基于 Web 的 spotify 帐户。同样，在 StackOverflow 中部署相同的脚本时，我卡在了预览模式（请参阅下文以运行代码 sn-p）

知道发生了什么事吗？我的理解是 Iframes 是客户端生成的，所以如果我的浏览器登录到基于 Web 的平台，我应该有权访问吗？

任何有助于我进一步理解的资源都将不胜感激。谢谢！
&lt;iframe style="border-radius:12px" src="https://open.spotify.com/embed/track/2vWE6Btt6Kwc8yRkr6g4Qg?utm_source=generator" width="100%" height="352" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"&gt;&lt;/iframe&gt;

【问题讨论】：

标签： iframe spotify spotify-app

【解决方案1】：

我正在评论未来的答案。我遇到了同样的问题。我有一个带有以下代码的 Spotify Oembed：

    <section id="spotify-player">
    <!-- spotify playlist player -->
        <div id="music"></div>
        <script>
        const music = document.getElementById("music");
        // tells you what today's date is
        const d = new Date(); 
        // gives the day of the week as a number (0-6) i.e. sunday = 0
        let day = d.getDay();

        function changeSong(url) {
            fetch(`https://open.spotify.com/oembed?url=${url}`)
                .then((response) => response.json())
                .then((data) => {
                music.innerHTML = data.html;
                });
            };

        if (day == 0 || day == 2) {
            changeSong('https://open.spotify.com/playlist/37i9dQZF1DX9uKNf5jGX6m');
        } else if (day == 1 || day == 3 || day == 5) {
            changeSong('https://open.spotify.com/playlist/37i9dQZF1DWURfu7Lk3xJ1');
        } else {
            changeSong('https://open.spotify.com/playlist/37i9dQZF1DWTiAxGU5Bgem');
        };
        </script>     
    </section>

它通过 Flask 在 Codepen 和我的本地主机上工作（不显示预览模式），但在服务器端，它停留在预览模式。在这两种情况下，我都会登录 Spotify。任何帮助深表感谢！

【讨论】：