Postman REST API Call To Parse Server Not Working In Javascript Website

Question

I have a Parse API Server (www.parse.com)hosted on Azure which I can make a REST API Call to without issue using Postman. When I translate this into my web app (using the Postman jQuery AJAX code snippet generator), I receive a 400 (bad request) response in the browser.

Initially, I am successfully calling the API through postman as follows:

FUNCTION: Post
URL: https://myparsewebapp.azurewebsites.net/parse/classes/_User
HEADERS: X-Parse-Application-Id = (My Application ID Set In The Azure CP)
BODY: {"username":"firstuser","password":"shushitsasecret","email":"[email protected]"}

With the above, I can successfully create a new user in Parse Server. Great!

Next, I copy the code using the Postman Generator & receive the following output:

  var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://myparsewebapp.azurewebsites.net/parse/classes/_User",
  "method": "POST",
  "headers": {
    "x-parse-application-id": "(My Application ID Set In The Azure CP)",
    "cache-control": "no-cache",
    "postman-token": "2a3c4ffc-b636-3ac4-bd7c-e559f7bced1b"
  },
  "data": "{\n    \"username\":\"firstuser\",\n    \"password\":\"shushitsasecret\",\n    \"email\":\"[email protected]\"\n}"
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

Note that in my source code I removed the cache-control & postman-token headers.

I take this & place it into my Angular 1 app, with the following form:

<div id="register_form" style="display: none">
    <button type="button" class="uk-position-top-right uk-close uk-margin-right uk-margin-top back_to_login" ng-click="backToLogin($event)"></button>
    <h2>Create an account</h2>
    <form id="register">
        <div class="uk-form-row">
            <label for="register-username">Username</label>
            <input id="register-username" type="text" />
        </div>
        <div class="uk-form-row">
            <label for="register-password">Password</label>
            <input id="register-password" type="password" />
        </div>
        <div class="uk-form-row">
            <label for="register-email">E-mail</label>
            <input type="text" id="register-email" />
        </div>
        <div class="uk-margin-medium-top">
            <input id="register-submit" type="submit" value="Sign Up!" />
        </div>
    </form>
</div>

I then alter data to read as follows:

"data": "{\"username\":\""+name+"\",\"password\":\""+password+"\",\"email\":\""+email+"\"}",

My full Javascript snippet looks like this:

$("#register").submit(function(event) {
                    event.preventDefault();

                    var name = $("#register-username").val();
                    var password = $("#register-password").val();
                    var email = $("#register-email").val();

                    var settings = {
                        "async": true,
                        "crossDomain": true,
                        "url": "https://myparsewebapp.azurewebsites.net/parse/classes/_User",
                        "method": "POST",
                        "headers": {
                            "x-parse-application-id": "(My Application ID Set In The Azure CP)"
                        },
                        "data": "{\"username\":\""+name+"\",\"password\":\""+password+"\",\"email\":\""+email+"\"}",
                    }
                    console.log(settings);
                    $.ajax(settings).done(function(response) {
                        console.log(response);
                    });
                });

The console.log output for the settings is as follows:

Object
async
:
true
crossDomain
:
true
data
:
"{"username":"admin","password":"secret","email":"[email protected]"}"
headers
:
Object
x-parse-application-id
:
"(My Application ID Set In The Azure CP)"
__proto__
:
Object
method
:
"POST"
url
:
"https://myparsewebapp.azurewebsites.net/parse/classes/_User"
__proto__
:
Object

Around 1 minute later, I then get the following response output:

POST https://myparsewebapp.azurewebsites.net/parse/classes/_User 400 (Bad Request)

are you sending this as pure text? probably your server don't understand. — Roljhon
– Roljhon, Commented Jan 22, 2017 at 13:31

charlietfl · Accepted Answer · 2017-01-22 13:59:22Z

1

If you want to send json then you need to set contentType:'application/json; charset=utf-8' since the default for $.ajax is to send a form encoded request.

Beyond that you will need to make sure that CORS is enabled in your api if request is cross domain. REST clients like Postman are not subject to CORS restrictions

edited Jan 22, 2017 at 13:59

answered Jan 22, 2017 at 13:30

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mr T Over a year ago

As in: var settings = { contentType: 'json', "async": true, "crossDomain": true, "url": "myparsewebapp.azurewebsites.net/parse/classes/_User", "method": "POST", "headers": { "x-parse-application-id": "myidremoved" }, "data": "{\"username\":\""+name+"\",\"password\":\""+password+"\",\"email\":\""+email+"\"}", }

Mr T Over a year ago

Also, when I don't remove "cache-control": "no-cache" from the headers, I get a CORS error.

charlietfl Over a year ago

So you need cors enabled

Mr T Over a year ago

Could you elaborate on this? I'm not sure how you do (or if you can) enable CORS on Parse.

charlietfl Over a year ago

Oh that was my bad...I recommended wrong value and should have known better

|

Collectives™ on Stack Overflow

Postman REST API Call To Parse Server Not Working In Javascript Website

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related