I'm working on a small Chrome extension that will call the Remember the Milk API. Google has a good example using the Flikr API, and I'm using it as the basis for my extension. Their example works perfectly in my browser (latest Chrome on Linux).

When I swap out the Remember the Milk API method names and API key, though, I'm getting the following error:

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

My code looks like this:

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

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

Any suggestions?

I'm working on a small Chrome extension that will call the Remember the Milk API. Google has a good example using the Flikr API, and I'm using it as the basis for my extension. Their example works perfectly in my browser (latest Chrome on Linux).

When I swap out the Remember the Milk API method names and API key, though, I'm getting the following error:

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

My code looks like this:

    var req = new XMLHttpRequest();
    req.open(
            "GET",
            "http://api.rememberthemilk./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.");
    }

Any suggestions?

• javascript
• google-chrome

2 Answers 2

And ... solved, as usual, within a couple of minutes of posting here. The issue was the manifest.json file, which originally had the Flikr API permissions in it. I had updated them to point to Remember the Milk, but apparently you need to uninstall and reinstall the extension for the permissions to be reregistered.

Google has a good tutorial dealing with XHR in extensions.

Here's the updated manifest.json. Maybe it'll be helpful for someone else.

    {
        "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./",
            "https://*.rememberthemilk./"
        ]
    }

Make sure its allow from server side by header

//header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
// or
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');

And also check your domain is having www or non-www redirction On.