Postman REST API 对解析服务器的调用在 Javascript 网站中不工作
Postman REST API Call To Parse Server Not Working In Javascript Website
我有一个 Parse API 服务器 (www.parse.com) 托管在 Azure 上,我可以使用 Postman 毫无问题地进行 REST API 调用。当我将其翻译成我的网络应用程序时(使用 Postman jQuery AJAX 代码片段生成器),我在浏览器中收到 400(错误请求)响应。
最初,我通过邮递员成功调用 API 如下:
- 函数: Post
- URL: https://myparsewebapp.azurewebsites.net/parse/classes/_User
- HEADERS: X-Parse-Application-Id =(我在 Azure CP 中设置的应用程序 ID)
- BODY: {"username":"firstuser","password":"shushitsasecret","email":"myemail@gmail.com"}
通过以上,我可以在Parse Server 中成功创建一个新用户。太棒了!
接下来,我使用 Postman 生成器复制代码并接收以下输出:
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\":\"myemail@gmail.com\"\n}"
}
$.ajax(settings).done(function (response) {
console.log(response);
});
请注意,在我的源代码中,我删除了 cache-control & postman-token headers.
我将其放入我的 Angular 1 个应用程序中,格式如下:
<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>
然后我修改数据如下:
"data": "{\"username\":\""+name+"\",\"password\":\""+password+"\",\"email\":\""+email+"\"}",
我的完整 Javascript 片段如下所示:
$("#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);
});
});
设置的console.log输出如下:
Object
async
:
true
crossDomain
:
true
data
:
"{"username":"admin","password":"secret","email":"myemail@gmail.com"}"
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
大约 1 分钟后,我得到以下响应输出:
POST https://myparsewebapp.azurewebsites.net/parse/classes/_User 400 (Bad Request)
如果要发送 json,则需要设置 contentType:'application/json; charset=utf-8'
,因为 $.ajax
的默认设置是发送表单编码请求。
除此之外,如果请求是跨域的,您还需要确保在 api 中启用了 CORS。像 Postman 这样的 REST 客户端不受 CORS 限制
我有一个 Parse API 服务器 (www.parse.com) 托管在 Azure 上,我可以使用 Postman 毫无问题地进行 REST API 调用。当我将其翻译成我的网络应用程序时(使用 Postman jQuery AJAX 代码片段生成器),我在浏览器中收到 400(错误请求)响应。
最初,我通过邮递员成功调用 API 如下:
- 函数: Post
- URL: https://myparsewebapp.azurewebsites.net/parse/classes/_User
- HEADERS: X-Parse-Application-Id =(我在 Azure CP 中设置的应用程序 ID)
- BODY: {"username":"firstuser","password":"shushitsasecret","email":"myemail@gmail.com"}
通过以上,我可以在Parse Server 中成功创建一个新用户。太棒了!
接下来,我使用 Postman 生成器复制代码并接收以下输出:
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\":\"myemail@gmail.com\"\n}"
}
$.ajax(settings).done(function (response) {
console.log(response);
});
请注意,在我的源代码中,我删除了 cache-control & postman-token headers.
我将其放入我的 Angular 1 个应用程序中,格式如下:
<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>
然后我修改数据如下:
"data": "{\"username\":\""+name+"\",\"password\":\""+password+"\",\"email\":\""+email+"\"}",
我的完整 Javascript 片段如下所示:
$("#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);
});
});
设置的console.log输出如下:
Object
async
:
true
crossDomain
:
true
data
:
"{"username":"admin","password":"secret","email":"myemail@gmail.com"}"
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
大约 1 分钟后,我得到以下响应输出:
POST https://myparsewebapp.azurewebsites.net/parse/classes/_User 400 (Bad Request)
如果要发送 json,则需要设置 contentType:'application/json; charset=utf-8'
,因为 $.ajax
的默认设置是发送表单编码请求。
除此之外,如果请求是跨域的,您还需要确保在 api 中启用了 CORS。像 Postman 这样的 REST 客户端不受 CORS 限制