CODEWITHSUNDEEP
javascriptxmlhttprequest
Adonis K. Kakoulidis
Adonis K. Kakoulidis

Reputation: 5132

Issue connecting to API server via xmlhttprequest

I'm trying to create a simple Pocket web application that would connect to their API and first authenticate and then retrieve the bookmarks of the authenticated user. Unfortunately I'm having using connecting to their service since I'm really inexperienced in this field.

I fail at step #2 of the documentation's authentication process which is getting a request token.

What i got so far is:

var url = "https://getpocket.com/v3/oauth/request";
var data = "consumer_key=censored&request_uri=foo.bar/success";

function post(url, data, parameters){
    var request;
    try{
        request = new XMLHttpRequest();
    }catch(e){
        request = false;
    }
    if(request !== false){
        request.open("POST", url, true);
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        // request.setRequestHeader("Access-Control-Allow-Origin", "*");
        request.send(data);
        request.onreadystatechange = function(){
            console.log(request.responseText);
        };
    }else{
        console.log("Couldn't create a new XmlHttpRequest Object");
    }
}

post(url, data);

I know that modern browsers block cross domain requests but I'm not sure how to fix it without using a proxy. The documentation doesn't mention anything (or it did and i didn't understand how). I'm aware that via JSONP i could get around this issue but im not sure how to tell if their API supports that either (or how to implement it). They only mention 2 options:

  1. application/x-www-form-urlencoded (DEFAULT)
  2. application/json

This is the error im getting:

XMLHttpRequest cannot load https://getpocket.com/v3/oauth/request. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

pocket v3 API

edit

I just finished trying to create the json version to see if this one works but seems like I'm doing something wrong (again).

var url = "https://getpocket.com/v3/oauth/request";
var data = {};
data.comsumer_key = "censored";
data.request_uri  = "foo.bar/success";

function post(url, data, parameters){
    var request;

    try{
        request = new XMLHttpRequest();
    }catch(e){
        request = false;
    }

    if(request !== false){
        request.open("POST", url, true);
        request.setRequestHeader("Content-type", "application/json");
        request.setRequestHeader("X-Accept", "application/json");
        request.setRequestHeader("Access-Control-Allow-Origin", "*");
        request.send(JSON.stringify(data));
        request.onreadystatechange = function(){
            console.log(request.responseText);
        };
    }else{
        console.log("Couldn't create a new XmlHttpRequest Object");
    }
}
post(url, data);

edit number 2

I uploaded a live demo here, It'd be easier to debug i guess

Upvotes: 0

Views: 1662

Answers (1)

jfriend00
jfriend00

Reputation: 707436

I see a couple issues:

First, an XMLHttpRequest is subject to the same origin restrictions so that's the main reason you're getting an access denied for same origin reasons. You need to do an actual form post, not an XMLHttpRequest. See here for an explanation: Why is $.post() subject to same-origin policy, but submitting a form with method='POST' okay?

Second, per the Pocket doc I see here http://getpocket.com/developer/docs/authentication, you need to be sending the redirect_uri parameter, not the request_uri parameter in Step 2 and it needs to be a full URL back to your app, not a relative URI.

Upvotes: 2

Related Questions