V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Alture
V2EX  ›  问与答

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

  •  
  •   Alture · 2017-01-14 09:34:04 +08:00 · 2572 次点击
    这是一个创建于 2906 天前的主题,其中的信息可能已经有所发展或是发生改变。

    通过$.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

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

    @cyr1l
    这个题我看了两天了,一直在查询 json 与 jsonp 之间的区别,我了解到 jsonp 是通过 script 传入数据的,斗鱼传回来的数据是 json 格式,而不是 jsonp ,没有 callback 名字,所以我不知道如何解决浏览器报错,按理说我能收到斗鱼的 json 格式,那我应该能把这个数据通过其他方式下载。我在 segmentfault 提问,有人告诉我通过服务器中转的方式获得,只是我到现在几乎没就接触过 php python 之类的语言。
    cyr1l
        4
    cyr1l  
       2017-01-14 10:13:11 +08:00 via iPhone   ❤️ 1
    @Alture 公开 API 并不代表允许跨域哦,一般来说都是针对后端请求的,他的 api 既不支持跨域的 header 也不支持 jsonp ,所以只能通过后端程序去中转。做一个反向代理也不麻烦,可以慢慢学一点后端语言。其实不用后端语言,仅用 nginx 配置一下也能实现代理中转。另外如果是 Chrome Extension 的话是可以跨域的,不需要中转服务器。
    Alture
        5
    Alture  
    OP
       2017-01-14 10:54:10 +08:00
    @cyr1l 嗯,这样我明白了,很感谢你,我先把题目就做成半成品,等以后学了后端知识。我再回过头来解决这道题
    MaqicXu
        6
    MaqicXu  
       2017-01-14 11:02:06 +08:00 via iPhone
    如果只是要完成功能,用 node request 去抓
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   915 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:47 · PVG 03:47 · LAX 11:47 · JFK 14:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.