setting headers and sending data with $http POST to pocket api returns CORS

Question

Unable to send a http post request to pocket api for obtaining the request token. I've got the consumer key already. The problem appears to be in setting the headers and sending the data in the request. The request when viewed in the browser displays none of the headers and the data.

Configuring Request

var req = {
        method:'POST',
        url:'https://getpocket.com/v3/oauth/request',
        headers: { 'Content-Type': "application/x-www-form-urlencoded; charset=UTF8",
                    'X-Accept':'application/x-www-form-urlencoded'
         },
         transformRequest: function(obj) {
            var str = [];
            for(var p in obj)
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            return str.join("&");
        },
        data: pocket_data
    };

    $http(req).then(function(result){console.log(result); 
    },function(error){
        console.log(error);
    });

Request from the browser. I don't get why the request method is OPTIONS instead of POST.

Request URL:https://getpocket.com/v3/oauth/request
Request Method:OPTIONS
Status Code:400 Bad Request
Remote Address:52.0.87.91:443

Response headers and Request headers sent. I don't get why the content-type is text/html when i've set it to application/x-www-form-urlencoded .

 **Response Headers**
view source
Cache-Control:private
Connection:keep-alive
Content-Length:15
Content-Type:text/html; charset=UTF-8
Date:Thu, 04 Feb 2016 07:22:35 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
P3P:policyref="/w3c/p3p.xml", CP="ALL CURa ADMa DEVa OUR IND UNI COM NAV INT STA PRE"
Pragma:no-cache
Server:Apache
Set-Cookie:PHPSESSID=ogqn0s0gmjpo24j6oo6rlj6vm6; path=/
Status:400 Bad Request
X-Error:Missing consumer key.
X-Error-Code:138
X-Source:Pocket
**Request Headers**
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type, x-accept
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:getpocket.com
Origin:http://localhost:9000
Pragma:no-cache
Referer:http://localhost:9000/create

I've even tried setting content-type to 'application/json' , didn't work. The api documentation for pocket.

Answer 1

I'm having the same problem. It looks like the Pocket API doesn't have CORS enabled, because the responses aren't coming back with CORS headers (e.g. Access-Control-Allow-Origin: *)

Kind of surprising - I guess this API is mostly built with app developers in mind, not web developers? This also explains why it works fine with command line tools like curl, because they don't have the same cross-domain security restrictions that browsers do.

What this means for you is that you'll have to write a serverside component living alongside the same domain as your app that acts as a proxy for these requests.