如何获取外部URL数据展示在网页上并解决同源策略跨域问题

你的请求确实触发了*同源策略（Same-Origin-Policy）*限制：浏览器默认禁止前端脚本直接向与当前页面不同源的地址发起AJAX请求，同源要求协议、域名、端口三者完全一致，你请求的广播电台接口未配置CORS跨域许可，因此浏览器会拦截该请求的响应内容。

• 方案1：后端代理转发（线上环境推荐）
  同源策略仅限制浏览器端的请求行为，服务端发起网络请求不受该规则限制。你可以自行开发一个简单的后端接口，由后端服务去请求该广播电台的接口，再将获取到的数据返回给前端，前端仅请求同域名下的自己的后端接口即可避开跨域限制。
• 方案2：浏览器插件场景适配
  如果你是开发浏览器扩展插件，只需要在插件的manifest配置文件中将目标接口域名加入跨域白名单，即可直接发起跨域请求。
• 方案3：本地调试临时方案
  本地开发测试时，可以通过命令行参数启动禁用跨域安全限制的浏览器，该方案仅可用于本地调试，不可用于正式线上场景。

你请求的接口返回的是标准XML格式数据，无需手动做字符串匹配过滤，可直接通过XML DOM API解析提取字段，修改后的参考代码如下：

<html>
<body>

<div id="data">
</div>

<button type="button" onclick="loadXMLDoc()">获取当前播放歌曲</button>

<script>
function loadXMLDoc() {
    // 此处替换为你自己的后端代理接口地址即可解决跨域
    const requestUrl = "你的代理接口地址";
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // 解析XML响应内容
            const xmlDoc = this.responseXML;
            // 提取对应字段
            const artistName = xmlDoc.getElementsByTagName("track_artist_name")[0].textContent;
            const trackName = xmlDoc.getElementsByTagName("track_title")[0].textContent;
            // 渲染到页面
            document.getElementById("data").innerHTML = `当前播放：${trackName} - ${artistName}`;
        }
    };
    xhttp.open("GET", requestUrl, true);
    xhttp.send();
}
</script>

</body>
</html>

内容的提问来源于stack exchange，提问作者Ren