Question

目前在我的网络应用项目中，我需要解析网页的内容，经过一些搜索，我发现Mercury Web Parser API非常适合我。
我对这种第三方API有一些经验，一般来说我可以得到我想要的结果但对于此API，我无法在官方网站上找到有关API使用情况的文档。
根据我的研究，它提供了两种方法：
首先是cURL如下：
curl -H "x-api-key: myapikey" "https://mercury.postlight.com/parser?url=https://trackchanges.postlight.com/building-awesome-cms-f034344d8ed"

myapikey是我从网站获得的API密钥。然后我可以以JSON格式获得结果，这是url参数指定的网页的主要内容。它适用于我，我的意思是cURL方法。

在网站上，它说第二种方法是HTTP调用，这正是我所需要的：

GET https://mercury.postlight.com/parser?url=https://trackchanges.postlight.com/building-awesome-cms-f034344d8ed
Content-Type: application/json
x-api-key: myapikey

基于我的理解，我使用jquery AJAX方法执行以下操作：

    var newurl = "https://mercury.postlight.com/parser?url=http://www.businessinsider.com/joel-spolsky-stack-exchange-interview-2016-12&x-api-key=myapikey"

    $.ajax({
        url: newurl,
        dataType: "jsonp",
        success: function(data){
            console.log(data.title);

        }
    })

这里我因为Cross原点问题而提出了JSONP请求。
但现在我面临401错误消息（401 Unauthorized。请求尚未应用，因为它缺少目标资源的有效身份验证凭据）

现在我的猜测是apikey没有正确传递给服务器。所以根据cURL的成功调用，我可以获得正确的AJAX调用格式吗？

更新
基于以下答案，我尝试将请求标头设置如下：

        $.ajax({
        url: newurl,
        dataType: "jsonp",

        beforeSend: function(xhr){
            console.log(apiKey);
            xhr.setRequestHeader('x-api-key', apiKey);
        },
        /*
        headers: {
            "x-api-key": "M1USTPmJMiRjtbjFNkNap9Z8M5XBb1aEQVXoxS5I",
            "contentType": 'application/json'       
        },
        */
        success: function(data){
            console.log("debugging")
            console.log(data.title);
        },
        error: function (error) {
            console.log(error)
        }
    })

我尝试了beforeSend和headers。但仍然无法工作并得到以下引用错误消息：

    send    @   jquery.js:8698
    ajax    @   jquery.js:8166
    addNewArticle   @   topcontroller.js:18
    fn  @   VM783:4
    e   @   angular.js:281
    $eval   @   angular.js:147
    $apply  @   angular.js:147
    (anonymous) @   angular.js:281
    dispatch    @   jquery.js:4435
    elemData.handle @   jquery.js:4121

对于最后一个send函数，仍然是401错误。

但ajax错误处理部分显示readyState:4和status: 404结果。那么这里发生了什么。

Answer 1

对于您的问题，curl请求正在发送一个标题，您已在$.ajax请求中将其作为查询字符串的一部分附加。

请尝试以下方法（使用beforeSend + xhr）：

// broke this string down so you don't have to scroll
var newurl = "https://mercury.postlight.com/parser?" +
             "url=http://www.businessinsider.com/" +
             "joel-spolsky-stack-exchange-interview-2016-12";

// set your api key
var apiKey = "<your api key>";
$.ajax({
    url: newurl,
    dataType: "json",
    beforeSend: function(xhr){xhr.setRequestHeader('x-api-key', apiKey);},
    success: function(data){
        console.log(data.title);
    }
})

javascript：如何基于可用的cURL请求进行AJAX调用

1 个答案: