javascript - 在 Chrome 扩展中从 JavaScript 调用网站 API 时出现跨域错误

Question

我正在开发一个小型 Chrome 扩展程序，它将调用 Remember the Milk API。谷歌有一个 good example使用 Flikr API，我将其用作扩展的基础。他们的示例在我的浏览器(Linux 上的最新 Chrome)中完美运行。

但是，当我换出 Remember the Milk API 方法名称和 API key 时，出现以下错误:

XMLHttpRequest cannot load http://api.rememberthemilk.com/services/rest/?method=rtm.test.echo&api_key=xxxxxxxxxxxxxxxxxxxxxx&name=Test%20task. 
Origin chrome-extension://lifnmciajdfhj is not allowed by Access-Control-Allow-Origin.

我的代码是这样的:

    var req = new XMLHttpRequest();
    req.open(
            "GET",
            "http://api.rememberthemilk.com/services/rest/?" +
            "method=rtm.test.echo&" +
            "api_key=xxxxxxxxxxxxxxxxxxxxxxxxxx&" +
            "name=Test%20task", 
            true);
    req.onload = onResponseReceived;
    req.send(null);

    function onResponseReceived() {
        console.log("It worked.");
    }

有什么建议吗？

Answer 1

并且...像往常一样，在此处发布后的几分钟内解决了。问题是 manifest.json 文件，该文件最初具有 Flikr API 权限。我已将它们更新为指向 Remember the Milk，但显然您需要卸载并重新安装扩展程序才能重新注册权限。

Google 有一个很好的处理 XHR in extensions 的教程.

这是更新后的 manifest.json。也许它会对其他人有所帮助。

    {
        "name": "Remember the Milk",
        "version": "1.0",
        "description": "A Remember the Milk extension.",
        "browser_action": {
            "default_icon": "rtm.png",
            "popup": "popup.html"
        },
        "permissions": [
            "http://*.rememberthemilk.com/",
            "https://*.rememberthemilk.com/"
        ]
    }