无法通过JSONP获取外部JSON数据并在浏览器控制台显示的问题

你的JSONP方案失效的原因 #

1. 请求URL缺少callback参数：JSONP的核心是让服务器返回「回调函数包裹JSON」的格式，你当前的请求地址https://www...?json=1没有携带callback参数，服务器只会返回纯JSON，浏览器把纯JSON当作脚本执行时会触发语法错误，自然拿不到数据。
2. 回调函数名不匹配：你定义的回调函数是insertReply，但你提供的外部接口地址里指定了callback=TestVideos，如果服务器是按照这个参数值返回对应函数包裹的JSON，那你的函数名必须和callback参数值一致，否则无法触发回调。

修正后的JSONP代码示例 #

方案一：自定义回调函数名，同步修改URL参数

<html>
<body>
   <p id="output"></p>
    <script>
        // 定义回调函数，函数名和URL里的callback参数值一致
        function insertReply(content) {
            // 先把数据打印到控制台
            console.log('获取到的数据：', content);
            // 再渲染到页面
            document.getElementById('output').innerHTML = JSON.stringify(content);
        }
        var script = document.createElement('script');
        // 加上callback参数，值和回调函数名一致
        script.src = 'https://www...?json=1&callback=insertReply';
        document.body.appendChild(script);
    </script>
</body>
</html>

方案二：使用接口指定的回调函数名

如果服务器要求必须用TestVideos作为回调函数名，就把函数名改成对应值：

<html>
<body>
   <p id="output"></p>
    <script>
        function TestVideos(content) {
            console.log('获取到的数据：', content);
            document.getElementById('output').innerHTML = JSON.stringify(content);
        }
        var script = document.createElement('script');
        script.src = 'https://www...?json=1&callback=TestVideos';
        document.body.appendChild(script);
    </script>
</body>
</html>

其他可行解决方法 #

如果JSONP方案因为服务器不支持（比如服务器不识别callback参数）而无法使用，还有以下两种常用方案：

• 后端代理：自己搭建一个简单的后端服务（比如用Node.js、PHP等），让后端去请求这个外部JSON接口，然后前端请求自己的后端接口。因为浏览器的CORS限制只针对前端跨域，后端请求没有这个限制。
• 请求服务器开启CORS：如果能联系到这个外部接口的管理员，可以请求对方在服务器配置中添加CORS响应头（比如Access-Control-Allow-Origin: *或者指定你的域名），这样前端就能直接用普通的fetch或XMLHttpRequest请求数据了。

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