Question

我试图在Chrome扩展程序中使用Javascript获取https://tmi.twitch.tv/hosts?include_logins=1&host=105458682的结果JSON，到目前为止我还没有成功。

当我在Google Chrome的标签页中打开它时，我收到以下JSON响应：

{"hosts":[{"host_id":105458682,"target_id":49780445,"host_login":"bobross","target_login":"misscoookiez"}]}

但是，如果我尝试使用Javascript（也就是Chrome扩展程序中使用的Javascript）调用相同的调用，我会收到以下错误：

XMLHttpRequest cannot load https://tmi.twitch.tv/hosts?include_logins=1&host=113403683. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://deooplkjmdhjdicmeijmecmlnapmjhkd' is therefore not allowed access.

我在Javascript中使用的代码是：

function callTwitch() {
    var req = new XMLHttpRequest();
    req.overrideMimeType("application/json");
    req.open("GET", "https://tmi.twitch.tv/hosts?include_logins=1&host=105458682" , true);
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            if (req.status == "200") {
                var data = JSON.parse(req.responseText);
                // Do something with data
            } else {
                // Do something else
            }
        }
    };
    req.send(null);
};

经过一些谷歌搜索后，我发现这是CORS的问题。 Twitch没有在他们的服务器上将Access-Control-Allow-Origin设置为*，而这似乎阻止了我。我尝试了许多不同的方法来获得JSON而没有任何成功。我不明白这个JSON从标签中获取时是如何以及为什么可用，而不是从Javascript获取它时...

任何人都可以帮助我吗？有没有办法从Javascript获取此JSON？

Answer 1

我最终找到了如何从Chrome扩展程序进行跨源XMLHttpRequest调用：我只需要添加＆＃34; https://tmi.twitch.tv/＆＃34;到manifest.json中的权限，我的原始代码开始工作。更多相关信息：https://developer.chrome.com/extensions/xhr

使用Chrome扩展程序中的Javascript从tmi.twitch.tv获取JSON

1 个答案: