在 Chrome 扩展中使用 Javascript 从 tmi.twitch.tv 获取 JSON

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 进行相同的调用（更准确地说是 Javascript 在 Chrome 扩展中使用），我将收到以下错误：

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);
};

google了一下，发现是CORS的问题。 Twitch 没有在他们的服务器上将 Access-Control-Allow-Origin 设置为 *，这似乎阻止了我。我尝试了很多不同的方法来获得 JSON 但都没有成功。我不明白这个 JSON 在从选项卡获取时如何以及为什么可用，而在从 Javascript...

获取时不可用

谁能帮帮我？有没有办法从 Javascript 得到这个 JSON?

Answer 1

我最终找到了如何从 Chrome 扩展进行跨源 XMLHttpRequest 调用：我只需要添加“https://tmi.twitch.tv/" to the permissions in manifest.json, and my original code started working. More about that here : https://developer.chrome.com/extensions/xhr

在 Chrome 扩展中使用 Javascript 从 tmi.twitch.tv 获取 JSON

Getting JSON from tmi.twitch.tv with Javascript in a Chrome extension

javascript

cors

twitch