通过xmlhttprequest发送连接到API服务器的问题

时间:2013-01-23 02:53:01

标签: javascript xmlhttprequest

我正在尝试创建一个简单的Pocket Web应用程序,该应用程序将连接到其API,然后首先进行身份验证,然后检索经过身份验证的用户的书签。不幸的是,我正在使用连接到他们的服务,因为我在这个领域真的没有经验。

我在文档验证过程的第2步失败了,它正在获取请求令牌。

到目前为止我得到的是:

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);

我知道现代浏览器会阻止跨域请求,但我不确定如何在不使用代理的情况下修复它。文档没有提到任何东西(或者它确实没有提及如何)。我知道通过JSONP我可以解决这个问题,但我不知道如何判断他们的API是否支持(或如何实现它)。他们只提到两个选项:

  1. application / x-www-form-urlencoded(DEFAULT)
  2. 应用/ JSON
  3. 这是我得到的错误:

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

    pocket v3 API

    修改

    我刚刚尝试创建json版本以查看这个版本是否有效但似乎我做错了(再次)。

    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);
    

    编辑编号2

    我上传了一个实时演示here,调试起来更容易

1 个答案:

答案 0 :(得分:2)

我看到了几个问题:

首先,XMLHttpRequest受到相同的原始限制,因此这是因为相同的原因而拒绝访问的主要原因。您需要做一个实际的表单帖子,而不是XMLHttpRequest。请参阅此处获取解释:Why is $.post() subject to same-origin policy, but submitting a form with method='POST' okay?

其次,根据我在http://getpocket.com/developer/docs/authentication看到的Pocket文档,您需要在步骤2中发送redirect_uri参数,而不是request_uri参数,它必须是完整的网址回到你的应用程序,而不是相对URI。

相关问题