怎样通过$.ajax 跨域请求斗鱼 TV API 取得 json 数据

2017-01-14 09:34:04 +08:00
 Alture

通过$.ajax 跨域请求 chrome 提示 Uncaught SyntaxError: Unexpected token

这是我失败的代码

    $.ajax({
        type: "get",
        url: "http://open.douyucdn.cn/api/RoomApi/live/lol",
        dataType: "jsonp",
        jsonp: "callback",
        jsonpCallback: "data",
        success: function(response) {
            console.log(response);
        }
    });

[斗鱼 TV API 文档]http://dev-bbs.douyutv.com/forum.php?mod=attachment&aid=MjU5fGQyMzMyMjQ3fDE0ODQzNTc1MzR8MHwxMTM%3D

我去 google 后,了解到返回的数据是 json 格式,但我如果将 dataType 的 value 改成 json 后,又会出现跨域问题。 这期间我尝试使用 script 直接调用该链接,但还是同样的问题, 贴出失败的代码:

var url = "http://open.douyucdn.cn/api/RoomApi/live/lol";
    var script = document.createElement("script");
    script.setAttribute("src", url);
    document.getElementsByTagName("head")[0].appendChild(script);

我觉得我的问题应该归纳为:如何使用 javascript 在跨域条件下调用 json 格式数据? 希望大家能指导我一下,谢谢!


这个问题来源于 freecodecamp 上的一个小题目, [题目地址]: https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api

我只是将其中的 twitch API 改为斗鱼 API

2536 次点击
所在节点    问与答
6 条回复
donlxn22
2017-01-14 09:43:38 +08:00
浏览器中跨域需要目标服务器(斗鱼)做允许跨域的配置。具体来说,斗鱼服务器,应该在你发送请求的 response 中加入允许跨域的几个 header 。
cyr1l
2017-01-14 09:43:43 +08:00
因为斗鱼不支持 JSONP ,你可以先研究一下 JSONP 实现跨越的原理,就能明白为什么会出错了,这里的解决办法可能只有用后端代理了。
Alture
2017-01-14 09:49:32 +08:00
@donlxn22
但是斗鱼公开它的 API ,应该已经在他的服务器上允许跨域的吧?

@cyr1l
这个题我看了两天了,一直在查询 json 与 jsonp 之间的区别,我了解到 jsonp 是通过 script 传入数据的,斗鱼传回来的数据是 json 格式,而不是 jsonp ,没有 callback 名字,所以我不知道如何解决浏览器报错,按理说我能收到斗鱼的 json 格式,那我应该能把这个数据通过其他方式下载。我在 segmentfault 提问,有人告诉我通过服务器中转的方式获得,只是我到现在几乎没就接触过 php python 之类的语言。
cyr1l
2017-01-14 10:13:11 +08:00
@Alture 公开 API 并不代表允许跨域哦,一般来说都是针对后端请求的,他的 api 既不支持跨域的 header 也不支持 jsonp ,所以只能通过后端程序去中转。做一个反向代理也不麻烦,可以慢慢学一点后端语言。其实不用后端语言,仅用 nginx 配置一下也能实现代理中转。另外如果是 Chrome Extension 的话是可以跨域的,不需要中转服务器。
Alture
2017-01-14 10:54:10 +08:00
@cyr1l 嗯,这样我明白了,很感谢你,我先把题目就做成半成品,等以后学了后端知识。我再回过头来解决这道题
MaqicXu
2017-01-14 11:02:06 +08:00
如果只是要完成功能,用 node request 去抓

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/334514

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX