通过 xmlhttprequest 连接到 API 服务器时出现问题

Issue connecting to API server via xmlhttprequest

本文关键字:问题 服务器 API xmlhttprequest 连接 通过      更新时间:2023-09-26

我正在尝试创建一个简单的 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 是否支持它(或如何实现它)。他们只提到了 2 个选项:

  1. application/x-www-form-urlencoded (默认)
  2. 应用程序/JSON

这是我得到的错误:

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

袖珍 v3 接口

编辑

我刚刚完成尝试创建 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

我在这里上传了一个现场演示,我想

调试会更容易

我看到几个问题:

首先,XMLHttpRequest 受到同源限制,因此这是您因同源原因而被拒绝访问的主要原因。 你需要做一个实际的表单发布,而不是XMLHttpRequest。 请参阅此处的解释:为什么 $.post() 受同源策略的约束,但使用 method='POST' 提交表单可以吗?

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