I have set up a Parse API Server on Azure and can successfully make REST API calls to it using Postman. However, when I try to replicate this process in my web app using the jQuery AJAX code snippet generated by Postman, I encounter a 400 (bad request) error response in the browser.
Initially, I am able to interact with the API through Postman as follows:
- FUNCTION: POST
- URL:
- HEADERS: X-Parse-Application-Id = (My Application ID Set In The Azure CP)
- BODY: {"username":"firstuser","password":"shushitsasecret","email":"[email protected]"}
Using the above configuration, I can successfully create a new user in the Parse Server.
Next, when I use the Postman Generator to generate the code snippet and integrate it into my Angular 1 app, the following form structure is employed:
<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>
After modifying the data component in the snippet, which now looks like this:
"data": "{\"username\":\""+name+"\",\"password\":\""+password+"\",\"email\":\""+email+"\"}",
The final Javascript snippet used in my application is structured as shown below:
$("#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+"\"}"
}
$.ajax(settings).done(function(response) {
console.log(response);
});
});
After executing the above script, the console displays the following outputs:
Object
async
:
true
crossDomain
:
true
data
:
"{"username":"admin","password":"secret","email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761b0f131b171f1a36111b171f1a5815191b">[email protected]</a>"}"
...However, approximately a minute later, a 400 (Bad Request) response is received after attempting to execute the POST request.