Issue connecting to API server via xmlhttprequest

Question

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:

application/x-www-form-urlencoded (DEFAULT)
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

score 2 · Accepted Answer · edited May 23 '17 at 11:44

2

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.

edited May 23 '17 at 11:44

Community

1
1

answered Jan 23 '13 at 04:25

jfriend00

683,504
96
985
979

I tried fixing that but i see nothing different now. I uploaded a live demo [here](http://pocket.aklp.gr/), It'd be easier to debug i guess – Adonis K. Kakoulidis Jan 23 '13 at 04:31
@AdonisK. - you might describe how one excercises this issue in the demo page. That page means nothing to me. I don't know what buttons to push the exercise the problem. – jfriend00 Jan 23 '13 at 04:33
You don't need to push anything, once you open the page the post() function is executed and the error results are written in javascript console of your browser. – Adonis K. Kakoulidis Jan 23 '13 at 04:35
@AdonisK. - OK, it looks like you need to change your POST to be an actual form post which is not subject to same origin restrictions, not an XMLHttpRequest which is subject to same origin restrictions. See what I've added to my answer. – jfriend00 Jan 23 '13 at 04:40
Ya what you are saying makes 100% sense but seems like i can't get it to work. Should i be using something like this? http://pastebin.com/b6mvX82g – Adonis K. Kakoulidis Jan 23 '13 at 05:20
1

@AdonisK. - No. Read the other SO post I linked to in my answer. To get around the same origin limitation, you have to do an actual form submission as in [`form.submit()`](https://developer.mozilla.org/en-US/docs/DOM/form.submit). You can't use AJAX. – jfriend00 Jan 23 '13 at 06:15

Issue connecting to API server via xmlhttprequest

edit

edit number 2

1 Answers1