javascript: how to make AJAX call based on the avaiable cURL request

Question

Currently in my web app project, I need to parse the content of a web page, and after some searching, I found that Mercury Web Parser API is quite suitable for me.
And I have some experience with such kind of third party APIs, generally speaking I can get my desired result.
But for this API, I can't find documentation about the API usage on the official website.
Based on the my study, it provide two methods:
first is cURL as following:
curl -H "x-api-key: myapikey" "https://mercury.postlight.com/parser?url=https://trackchanges.postlight.com/building-awesome-cms-f034344d8ed"

the myapikey is the API key I get from the website. Then I can get the result in JSON format, which is the main content of the web page specified by the url parameter. It works well for me, I mean the cURL method.

And on the website, it said that the second method is HTTP call, which is just what I need:

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

So based on my understanding, I use jquery AJAX method to do this as following:

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

        }
    })

here I made JSONP request because of the Cross origin issue.
But now I face 401 error message (401 Unauthorized. The request has not been applied because it lacks valid authentication credentials for the target resource)

For now my guess is that the apikey is not correctly passed to server. So based on the cURL's successful call, can I get the correct format for AJAX call?

Update:
Based on the following answers ,I tried to set the request header as following:

        $.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)
        }
    })

I tried both beforeSend and headers. But still can't work and get the following trackback error message:

    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

And for the last send function, still 401 error.

But the ajax error handling part shows that the readyState:4 and status: 404 result. So what's going here.

`x-api-key` is a header, not a query string parameter. Try this solution here [Send header using Ajax](http://stackoverflow.com/a/3258685/3504007) — Kraang Prime, Jan 03 '17 at 14:32
@Prime, thank you. Change to `json`, and it works. But how so? If I remove `beforesend` part, it will report the cross origin error. That's why I used `jsonp`. And how did you figure out need such change based on the above error message? — Chris Bao, Jan 04 '17 at 02:02

Kraang Prime · Accepted Answer · 2017-01-04T03:18:22.957

1

For your question, the curl request is sending a header which you have attached as part of the query string in your $.ajax request.

Try the following instead (using 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);
    }
})

edited Jan 04 '17 at 03:18

answered Jan 03 '17 at 14:37

Kraang Prime

9,981
10
58
124

I tried to setting the request header,but still can't work. Please take a look at the update of the original post. – Chris Bao Jan 04 '17 at 01:19
@baoqger - I edited the solution to be what you needed as final result. Changing from `jsonp` to `json`, was just a logical thing you would try given everything else is correct (in my solution). – Kraang Prime Jan 04 '17 at 03:19

javascript: how to make AJAX call based on the avaiable cURL request

1 Answers1