邮递员REST API调用以解析服务器在Javascript网站中不起作用

Question

我在Azure上托管了一个解析API服务器（ www.parse.com ），可以使用Postman进行REST API调用。 当我将其翻译为我的Web应用程序（使用Postman jQuery AJAX代码片段生成器）时，在浏览器中收到400（错误请求）响应。

最初，我可以通过邮递员成功调用API，如下所示：

• 功能：张贴
• 网址： https ： //myparsewebapp.azurewebsites.net/parse/classes/_User
• 标题： X-Parse-Application-Id =（我在Azure CP中设置的应用程序ID）
• 身体： {“用户名”：“第一用户”，“密码”：“ shushitsasecret”，“电子邮件”：“ myemail@gmail.com”}

通过以上操作，我可以在Parse Server中成功创建一个新用户。 大！

接下来，我使用Postman Generator复制代码并收到以下输出：

  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标头 。

我采用以下格式并将其放入我的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)

Answer 1

如果要发送json，则需要设置contentType:'application/json; charset=utf-8' contentType:'application/json; charset=utf-8'因为$.ajax的默认值是发送表单编码的请求。

除此之外，如果请求是跨域的，您将需要确保在您的api中启用了CORS。 像Postman这样的REST客户端不受CORS限制