Correctly posting data with authentication in JavaScript / JQuery

Question

I am writing an application through Electron for a simple text editor that posts drafts to Medium.com. They provide an API and the documentation for it, but my knowledge in jQuery and JavaScript is still a little limited. Essentially, I'm using AJAX to post the data to Medium, but receiving a 400 error. I'm sure it's something really dumb and simple, but I can't figure it out, so here's the code I've written to post the data:

$('.save_draft').click(function(){
    
    var accessToken = 'xxxxx';
    
    $.ajax({
        url: "https://api.medium.com/v1/users/" + user.id + "/posts",
        type: 'POST',
        dataType: 'html',
        contentType: "application/json",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Authentication", accessToken)
        },
        data: {
            "title": "Liverpool FC",
            "contentFormat": "html",
            "content": "<h1>Liverpool FC</h1><p>You’ll never walk alone.</p>",
            "canonicalUrl": "http://jamietalbot.com/posts/liverpool-fc",
            "tags": ["football", "sport", "Liverpool"],
            "publishStatus": "draft",
        },
        success: function(data){
            alert(data);
        }
    });

});

Now I'm providing the accessToken, I've just 'xxxxx'd it for posting. user.id is received at the start, I can confirm that it's coming through correctly. As for the documentation provided, you can see it here: https://github.com/Medium/medium-api-docs#33-posts but essentially it's asking for this:

POST /v1/users/5303d74c64f66366f00cb9b2a94f3251bf5/posts HTTP/1.1
Host: api.medium.com
Authorization: Bearer 181d415f34379af07b2c11d144dfbe35d
Content-Type: application/json
Accept: application/json
Accept-Charset: utf-8
{
 "title": "Liverpool FC",
 "contentFormat": "html",
 "content": "<h1>Liverpool FC</h1><p>You’ll never walk alone.</p>",
 "canonicalUrl": "http://jamietalbot.com/posts/liverpool-fc",
 "tags": ["football", "sport", "Liverpool"],
 "publishStatus": "public"
}

The updated code:

$.ajax({
        url: "https://api.medium.com:443/v1/users/" + user.data.id + "/posts",
        type: 'POST',
        headers: {
            'Authorization': 'Bearer ' + accessToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        data: JSON.stringify({
            "title": "Liverpool FC",
            "contentFormat": "html",
            "content": "<h1>Liverpool FC</h1><p>You’ll never walk alone.</p>",
            "canonicalUrl": "http://jamietalbot.com/posts/liverpool-fc",
            "tags": ["football", "sport", "Liverpool"],
            "publishStatus": "draft",
        }),
        success: function(data){
            alert(data);
        }
    });

can you check what the 400 error response is? Usually it explains what is missing — Sarantis Tofas, Mar 27 '16 at 23:57

Sarantis Tofas · Answer 1 · 2016-03-27T23:56:55.430

1

For setting headers you shoud use the header property when sending ajax request.

// Request with a header property
$.ajax({
    url: 'foo/bar',
    headers: {
        'Authorization': 'Bearer ' + accessToken,
        'Content-Type':'application/json'
    }
});

Also you shoud stringify your data before send:

data: JSON.stringify({
        "title": "Liverpool FC",
        "contentFormat": "html",
        "content": "<h1>Liverpool FC</h1><p>You’ll never walk alone.</p>",
        "canonicalUrl": "http://jamietalbot.com/posts/liverpool-fc",
        "tags": ["football", "sport", "Liverpool"],
        "publishStatus": "draft",
    }),

But it should be another problem with your request as well. 400 error means that you havent send a required field to the service

edited Mar 27 '16 at 23:56

answered Mar 27 '16 at 23:49

Sarantis Tofas

5,097
1
23
36

Thats great thanks, i've updated it that now and it's stopped giving me the 400 error, now a 401, authentication error with the wrong host? `code: -1 message : " is not an allowed domain. Our host is (api.medium.com:443, /v1/users/myUserIdHere/posts)"`. So i've added my updated code to the original post so you can see what i'm doing, but it's as instructed by the documentation. – Jam3sn Mar 28 '16 at 11:35
401 means that the accessToken is invalid. Are u sure you are sending a valid token? – Sarantis Tofas Mar 28 '16 at 13:53
there must be something wrong, please read the documentation, in general this is the way to do an ajax request as my answer suggests. Also try to change the url to `"https://api.medium.com/v1/users/" + user.data.id + "/posts"` – Sarantis Tofas Mar 28 '16 at 17:21
I had that url originally, only added the port because it was the url given in the 401 error. So not to sure to be honest. I'll find it, thanks for your help! – Jam3sn Mar 29 '16 at 12:07

score -1 · Answer 2 · answered Jun 26 '16 at 22:35

-1

I was having a similar problem (401 'is not an allowed domain' response on POST) and resolved the issue by including an additional header with the request:

Origin: https://api.medium.com

answered Jun 26 '16 at 22:35

abonstu

1
2

Correctly posting data with authentication in JavaScript / JQuery

2 Answers2